我经常使用这段代码将 div
居中显示:
.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
它在Firefox、Internet Explorer和Chrome上运行良好,但在Safari上不起作用。
有什么方法可以解决在Safari浏览器中居中图片的问题?
你需要另一个带有厂商前缀的样式。
.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
这是我在所有测试的浏览器和移动设备(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%);
}
。
-webkit-transform: translate3d(-50%,-50%,0);
.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 中使用这些属性,以及如何通过将它们应用于单独的元素来创建复杂的变换效果。