【CSS】android4.xでposition:fixedで上下左右中央揃え

この記事について

環境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

タイトルとURLをコピーしました