CSS 为什么在 Safari 上转换翻译不能正常工作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29864790/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why on Safari the transform translate doesn't work correctly?
提问by NineCattoRules
I often use this code to center a divin view:
我经常使用此代码将 a 居中div：
.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
It works great on Firefox, Internet Explorer and Chrome, however not in Safari.
它适用于 Firefox、Internet Explorer 和 Chrome，但不适用于 Safari。
What's a workaround to center an image in Safari web browser?
在 Safari 网络浏览器中居中图像的解决方法是什么？
回答by Muthukannan Kanniappan
You need another vendor prefixed style.
您需要另一个供应商前缀样式。
.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Please refer below to know which browser supports what and what prefix has to be added. http://caniuse.com/#feat=transforms2d
请参阅下面以了解哪个浏览器支持什么以及必须添加什么前缀。 http://caniuse.com/#feat=transforms2d
回答by Murf
Here is what works for me on all tested browsers and mobile devices (Chrome, IE, Firefox, Safari, iPad, iphone 5 and 6, Android).
这是在所有经过测试的浏览器和移动设备（Chrome、IE、Firefox、Safari、iPad、iphone 5 和 6、Android）上对我有用的方法。
The key for safari (including ios devices) is to add the other transform css rules and not just:
safari（包括ios设备）的关键是添加其他转换css规则而不仅仅是：
transform: translateY(-50%);
You need to add to it this group of rules:
您需要向其中添加这组规则：
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
Here is some working code of mine:
这是我的一些工作代码：
img.ui-li-thumb {
position: absolute;
left: 1px;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
回答by Iggy
In some cases you'll have to use:
在某些情况下，您必须使用：
-webkit-transform: translate3d(-50%,-50%,0);
Sometimes works better with mobile browser.
有时使用移动浏览器效果更好。
