最近在做一个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;

    }

这样, 显示就正常了: