最近在做一个app内嵌H5的项目, H5里面用到不少css绝对定位。刚开始的时候我是用下面第一种方法做的, 大部分手机的显示都是正常的, 但是在安卓4.4.4的系统下就有问题了。
1. 首先说一下主流的兼容方法
img {
display:block;
width:60px;
height:60px;
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%);
}
transform里面translate的偏移值是相对元素本身的, 一般来说, 这样的写法大多数浏览器都能兼容。但就是在安卓4.4.4系统下的显示是这样的:
很明显, transform属性并没有起效。因此, 我换成了第二种写法:
2. margin: auto 实现居中
img {
display:block;
width:100%;
min-height:180px;
position:absolute;
top:0;
left:0;
bottom:0;
margin:auto;
}
这样, 显示就正常了:
