使用XHTML+CSS來實現元素的垂直居中一直是前端開發中的一個比較復雜且棘手的問題，作為網頁設計師或前端開發工程師，這個垂直居中問題也是必須掌握的技巧之一，一些互聯網公司面試題中也會出現這類題目。今天暴風彬彬將分享一個完美通過CSS實現垂直居中的方法，該方法是由aka Yuh?發明的，這個方法也是目前暴風彬彬覺得最完美最簡潔的CSS垂直居中實現方法。下面來看看暴風彬彬曾經總結的筆記，大家有不同意見請多拍磚:

先來看看實例效果Demo

該CSS垂直居中的條件:

1.已有一個已定義高度的容器(如<div>)
2.內部有一個未知高度的對象(也許是后臺動態生成的文本，放在另一個<div>中)
3.我想讓內部的對象在容器內垂直居中。
4.不使用HTML的表格(table元素)，也不使用Javascript。

該CSS垂直居中的方法:

最大的問題:IE瀏覽器的Bug。

　　大部分瀏覽器能理解CSS中的display:table之類的表格方式聲明，但IE7及其以下的舊版IE無法理解這個聲明。

解決辦法:讓大部分能理解display:table聲明的瀏覽器使用vertical-align屬性達到垂直居中，讓IE7及以下版本用自己理解高度的Bug來解決居中問題。

IE Bug:　

IE7及以下版本理解高度的Bug:如果a容器內有b對象，a容器并沒有設置高度值，如果b對象有實際內容(如文字)，那么就會將a的高度理解為與b相等。那么如果對b采取相對定位，b就會相對于在a中的原始位置移動(主要利用百分比高度)。

eg:a未定義高度，b的高度為100px，將b相對定位，并設top:-50%

在這種情況下:標準瀏覽器由于未知a的高度,所以b不動。而IE7及以下版本則會讓b相對a的高度(其實等于b的高度)上移50%，也就是50px 。

如何僅讓IE7及以下版本理解對它們的聲明？

1.Pixy曾發明underscore hack，就是在每個CSS屬性前加一個下劃線”_”，這個hack是專門針對IE6及以下版本的，也就是說IE7無法理解。如:_position:absolute; 所以這種hack就PASS!
2.在屬性前加“#”的聲明正好可以僅讓IE7及以下版本理解，而其它任何瀏覽器都無法理解這個”#”，所以”#”后的聲明就會被其它瀏覽器忽略掉。 OK~~就這個！

兼容性:

　　目前為止兼容直到IE8.x的所有IE瀏覽器、Gecko核心瀏覽器(Mozilla,Firefox,Netscape 7)、Opera 7、Webkit核心瀏覽器(Safari及Google Chrome)。

代碼:

CSS部分:

#outer {
display:table;
height:400px;
#position:relative;
overflow:hidden;
}
#middle {
display:table-cell;
vertical-align:middle;
#position:absolute;
#top:50%;
}
#inner {
#position:relative;
#top:-50%;
}

XHTML部分:

<div id=”outer”>
<div id=”middle”>
<div id=”inner”>
<!–這里是要垂直居中的內容–>
</div>
</div>
</div>

預覽效果Demo(在Demo源代碼中附加了一些用于修飾的CSS聲明，大家可以忽略)

經測試，該方法也適用于圖片垂直居中，建議大家在使用的時候定義好outer層的寬度。

總結

以上是生活随笔為你收集整理的使用CSS完美实现垂直居中的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。