使用負邊距進行垂直居中，適用於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，有什麼想法？

回答

相關問題