Question

我正在尝试实现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浏览器中完美运行...

Answer 1

如果您知道div的高度和宽度，我会将您的CSS更改为：

.box{
    position:absolute;
    width:50%;
    height:400px;
    top:50%;
    left: 50%;
    margin-top: -200px; /* Half the height of the div */
    margin-left: -25%; /* Half the width of the div */
    background:#ccc;
}

你将div向下移动到整个页面的一半，然后将它的负边距向后移动了一半的宽度。

http://jsfiddle.net/davidpauljunior/utPhs/2/

注意：你有两个宽度声明，我猜你想要第二个（50％），所以删除了第一个。我将位置固定为绝对值，但它适用于两者，我删除了显示：块<div>已经是块级元素。

Answer 2

这仅仅是因为即使是最新版本的Chrome，您也需要使用供应商前缀-webkit-进行CSS3转换。自v16（当前版本v25）以来，Mozilla Firefox一直支持无前缀变换，具有讽刺意味的是当前版本的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;
}

http://codepen.io/terrymun/pen/zCgkI

在浏览器中对齐未知大小的div

2 个答案: