使用CSS完美實現垂直置中的方法

文章目錄

• 該CSS垂直置中的條件:
• 該CSS垂直置中的方法:
• 相容性:
• 代碼:

　　使用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層的寬度。

博文來源：http://blog.bingo929.com/css-vertical-center.html