Question

我经常使用此代码将div置于视图中心：

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

它适用于Firefox，Internet Explorer和Chrome，但不适用于Safari。

在Safari网络浏览器中将图像居中的解决方法是什么？

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

Answer 2

这适用于所有经过测试的浏览器和移动设备（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%);
}

Answer 3

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

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

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

为什么在Safari上转换翻译无法正常工作？

3 个答案: