Css 为什么在Safari上转换不转换'；你不能正常工作吗？

我经常使用此代码将视图中的

div

居中：

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

它在Firefox、InternetExplorer和Chrome上运行得很好，但在Safari上却不行

---

在Safari web浏览器中使图像居中的解决方法是什么？

您需要另一种供应商前缀样式

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

请参阅下面的内容，了解哪个浏览器支持什么以及必须添加什么前缀。

---

以下是我在所有经过测试的浏览器和移动设备（Chrome、IE、Firefox、Safari、iPad、iphone 5和6、Android）上都能使用的功能

safari（包括ios设备）的关键是添加其他转换css规则，而不仅仅是：

transform: translateY(-50%);

您需要向其中添加以下规则组：

-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);

以下是我的一些工作代码：

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%);
}

---

在某些情况下，您必须使用：

-webkit-transform: translate3d(-50%,-50%,0);

---

有时使用移动浏览器效果更好。

答案很好，但只需修改一下即可：前缀版本应先于非前缀版本。换句话说，将W3C标准属性放在供应商前缀属性之后。这就是为什么这很重要：哦，这太美了。只有´-webkit转换是不够的：translateY（-50%）；但你也需要有其他的供应商。做得好，苹果，超级设计。鞠躬。@rory这些不同的前缀是为了支持某些版本的internet explorer（-ms）、firefox（-moz）和opera（-o）。-webkit前缀用于webkit浏览器（chrome和safari）。所以这绝对不仅仅是苹果的事情。这是标准的事情。