使用负边距垂直居中，在 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;
}

Answer 2

垂直对齐演示

CSS

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

来源

这应该相对容易实现，你的 DIV布局基本上100%有，

PS设计不错啊！