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

Question

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

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

它适用于Firefox,Internet Explorer和Chrome,但不适用于Safari.

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

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