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

Question

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

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

我正在处理的网站在 Safari 中呈现良好，但在 Chrome 或 Firefox 中呈现不佳。

Firefox 看到了样式，但只渲染负的上边距而不是 top:50%。

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

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

Answer 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;
}