oppo R7不支持transform:translateX(-50%)，前缀都带了，没用？

Question

如题，fixed定位的div，top:50%,left:50%,transform:translate(-50%,-50%),其他手机，都好的，oppo R7居然不居中，是不支持translate？

Answer 1

我觉得并不是 R7 不支持 translateX。不信你可以写一个纯粹的居中单例然后在 R7 上看，我能说 100% 是没问题的。

大胆猜测你的问题是 js 调用弹层后出现的弹窗不居中。解决方案（hack）可以考虑使用 translate3d(-50%, -50%, 0) 代替 translate(-50%, -50%)。

另一个思路是，给弹窗添加一个蒙层，蒙层用 fixed 定位，弹窗用 absolute 定位，然后代码照旧。如下：

/*蒙层*/
.alert {
    position: fixed; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
}
/* 窗口 */
.alert_box {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%)
}

Answer 2

如果是特定手机不能居中定位的话，那可能就是兼容性问题了，或者换一种布局方式，移动端可以用flex布局，也很容易实现居中。要不就是识别手机，用js控制，如果是R7，就单独处理。不过先要确定是兼容性问题还是其他意外情况

Answer 3

加了webkit都不行吗？知道高度和宽度的用margin-top，bottom 负宽高的一半，不知道的话用js margin-top，bottom 负offsetHeight offsetWidth 的一半

Answer 4

手机出现特殊兼容的问题 没有代码看不好判断
首先考虑是transform:translate(-50%,-50%),加多一个-webkit-transform:translate(-50%,-50%),有些情况下可能连里面的translate都要写上-webkit-；
实在不行 现在手机都兼容flex的，你加多一个外部容器flxed left:0,top,0充满屏幕 然后里面的元素用flex来居中试试