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

我一直在寻找找人谁也有类似的问题对我说：使用负边距进行垂直居中，适用于Safari，但不适用于Firefox/Chrome，有什么想法？

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

网站我的工作使得在Safari罚款，但无法在Chrome或Firefox。

Firefox看到的风格，但只呈现负顶边不顶：50％。

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

有谁知道为什么会发生这种情况？我已经差不多用完的想法......

来源

2011-02-13 Dom

为什么要使用'margin-top：-245px`和`top：50％`？ – Sotiris 2011-02-13 19:06:39

我希望内容在页面上垂直居中，内容高度为490px。 – Dom 2011-02-13 19:11:58

有没有更好的方法来实现这一目标？ – Dom 2011-02-13 19:12:18

您需要使用绝对定位，添加一个高度，边距应该是高度的一半否定。点击这里查看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; 
}

来源

2011-02-13 19:42:09 Hussein

Vertical Align Demo

CSS

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

Source

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

P.S.好设计的人！

来源

2011-02-13 19:19:51

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

回答

相关问题