<分区>
<分区>
我正在尝试实现 div 的居中垂直和水平对齐。 这是我正在使用的样式:
.box{
position:fixed;
display:block;
width:200px;
height:400px;
top:50%;
left: 50%;
width: 50%;
transform: translateX(-50%) translateY(-50%);
background:#ccc;
}
此样式在 Firefox 中完美运行，但在 Chrome 中运行不佳。这是示例:http://codepen.io/0leg/full/HJjrK
有趣的是，我在本教程的模态窗口中提升了这种样式 http://tympanus.net/Development/ModalWindowEffects/ ，出于某种原因，这在 webkit 浏览器中完美运行......
最佳答案
这仅仅是因为即使在最新版本的 Chrome 中，您也需要使用供应商前缀 -webkit- 进行 CSS3 转换。 Mozilla Firefox 自 v16(当前 v25)以来一直支持无前缀转换，具有讽刺意味的是，当前版本的 IE 也是如此。有关浏览器支持的更多信息，请访问:http://caniuse.com/transforms2d
因此，使用供应商前缀(只要 -webkit- 就足够了，除非你想支持旧版本的 IE 和 Firefox，然后也使用它们各自的供应商前缀):
.test {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: red;
width: 200px;
height: 200px;
}
关于css - 跨浏览器对齐未知大小的div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19694433/