使用XHTML+CSS來實現(xiàn)元素的垂直居中一直是前端開發(fā)中的一個比較復(fù)雜且棘手的問題，作為網(wǎng)頁設(shè)計師或前端開發(fā)工程師，這個垂直居中問題也是必須掌握的技巧之一

該CSS垂直居中的條件:

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

該CSS垂直居中的方法:

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

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

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

IE Bug:　

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

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

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

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

1.Pixy曾發(fā)明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”>
?? ? ? ? ??<!–這里是要垂直居中的內(nèi)容–>
?? ? ? ?</div>
?? ?</div>
</div>?

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

PS：http://blog.bingo929.com/css-vertical-center.html

轉(zhuǎn)載于:https://www.cnblogs.com/zytrue/p/8493598.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。