この記事について
| 環境 | android4.x + CSS |
|---|---|
| 目的 | position:fixed で上下左右中央揃えにする |
| 結果 | top/left 50% + transform:translate(-50%,-50%) でできた |
つまずきポイント要約
- margin:auto 方式は android4.x系では効かない
position:fixedで上下左右中央揃えをする方法をネットで調べた。
.box1{
position: fixed !important;
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
margin:auto;
width:145px;
height:145px;
}
しかしandroid4.x系だとうまくいかないらしく自分のはまる。
対策、これでうまくいく。
.box1{
position: fixed !important;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
参考;
http://youknow.jp/web/css-position
