使用负边距垂直居中，在 Safari 中有效，但在 Firefox/Chrome 中无效，有什么想法吗？答案

【问题标题】：Vertical centering using negative margins, works in Safari but not in Firefox/Chrome, any ideas?使用负边距垂直居中，在 Safari 中有效，但在 Firefox/Chrome 中无效，有什么想法吗？
【发布时间】：2015-06-22 08:24:04
【问题描述】：

我一直在寻找与我有类似问题的人：

http://dominicburton.co.uk/soas/

我正在开发的网站在 Safari 中可以正常渲染，但在 Chrome 或 Firefox 中却不行。

Firefox 看到样式，但只呈现负上边距而不是 top:50%。

#wrapper {
margin-top: -245px;
position: relative;
top: 50%;
}

有人知道为什么会这样吗？我的想法已经用完了......

【问题讨论】：

为什么要使用margin-top:-245px和top:50%？
我希望内容在页面上垂直居中，内容高度为490px。
有没有更好的方法来实现这一点？

标签： html css positioning center vertical-alignment

【解决方案1】：

您需要使用绝对定位，添加一个高度和边距应该是高度的一半否定。在这里查看http://jsfiddle.net/CYKwM/

#wrapper {
    height:490px; /* you need to specify a height*/
    width:490px;
    margin-top: -245px; /*negative half the height*/
    position: absolute; /*change to absolute*/
    top: 50%;
    background:red;
}

【讨论】：

不知道是不是只有我一个人，但是那个大红盒子好像在跳动。 :o
@shaz 我认为这是你的显示器刷新率，你可以给我 +1 来回答你的问题 :-)
@Shaz：这可能是低成本显示器的结果。

【解决方案2】：

Vertical Align Demo

CSS

#wrapper {height:490px;
margin-top: -245px; /* Negative Half Height */
position: absolute;
top: 50%;
}

Source

这个应该比较容易实现，你的DIV布局基本100%在那里，

附：设计不错！

【讨论】：

谢谢！我添加了表格和单元格结构，但由于某种原因它似乎与顶部对齐。子div是绝对定位还是相对定位有关系吗？ wrapper的高度需要设置吗？
@Dom - 它不需要高度 - 这是这种方法的优点，但是如果它是一定的高度，还有另一种方法吗？ Wrapper 我认为应该设置为 100% - 我会为你做一个小提琴。
刚刚设法使用上面的建议解决了它，不过还是谢谢。