为什么在Safari浏览器中transform translate无法正常工作？

Question

我经常使用这段代码将 div 居中显示：

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

它在Firefox、Internet Explorer和Chrome上运行良好，但在Safari上不起作用。

有什么方法可以解决在Safari浏览器中居中图片的问题？

- NineCattoRules

Answer 1

你需要另一个带有厂商前缀的样式。

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

请参考以下内容了解哪些浏览器支持什么以及需要添加什么前缀。 http://caniuse.com/#feat=transforms2d

- Muthukannan Kanniappan

---

答案很好，但如果进行以下修改，将更加完美：在无前缀版本之前添加前缀版本。换句话说，在供应商前缀属性之后放置W3C标准属性。这是为什么这很重要：https://dev59.com/eGw05IYBdhLWcg3wsz7N - Michael Benjamin

Answer 2

这是我在所有测试的浏览器和移动设备（Chrome，IE，Firefox，Safari，iPad，iPhone 5和6，Android）上使用的解决方案。

对于Safari（包括iOS设备），关键是要添加其他的transform 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%);
}

- Murf

---

哦，这太美了。仅使用´-webkit-transform: translateY(-50%);´还不够，你还需要为其他供应商设置。苹果做得很好，设计超级棒。请鞠躬致谢。 - rory

@rory 这些不同的前缀是为了支持特定版本的Internet Explorer（-ms），Firefox（-moz）和Opera（-o）。 -webkit前缀是为了支持Webkit浏览器（Chrome和Safari）。因此，这绝对不仅仅是苹果的事情，而是一个标准的问题。 - Adam Fraser

Answer 3

在某些情况下，您将需要使用：

。

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

有时在移动浏览器上效果更佳。

- Iggy

Answer 4

.some-element {
  transform: translate(50px 50px) rotate(15deg) scale(1.2);
}

如果上述转换方法对您无效，您可以将它们单独编写为自己的属性：

.some-element {
  translate: 50px 50px;
  rotate: 15deg;
  scale: 1.2;
}

参考资料：https://css-tricks.com/css-individual-transform-properties-in-safari-technology-preview/

这篇文章介绍了 Safari 技术预览版中的 CSS 个别变换属性，这些变换属性包括：translate、rotate、scale 和 skew。文章详细说明了如何在 CSS 中使用这些属性，以及如何通过将它们应用于单独的元素来创建复杂的变换效果。

- Elias