使用负边距进行垂直居中，适用于Safari但不适用于Firefox / Chrome，任何想法？

Question

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

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

我正在处理的网站在Safari中呈现得很好，但在Chrome或Firefox中却没有。

Firefox看到了这种风格，但只会使负的上边距不是最高的：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

<强> Vertical Align Demo

<强> CSS

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

Source

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

P.S。好设计的人！