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

Question

如题，fixed定位的div，top:50%,left:50%,transform:translate(-50%,-50%),其他手机，都好的，oppoR7居然不居中，是不支持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，就单独处理。不过先要确定是兼容性问题还是其他意外情况