使用XHTML+CSS來實現元素的垂直置中一直是前端開發中的一個比較複雜且棘手的問題，作為網頁設計師或前端開發工程師，這個垂直置中問題也是必須掌 握的技巧之一，一些互連網公司面試題中也會出現這類題目。今天將分享一個完美通過CSS實現垂直置中的方法，該方法是由aka Yuhů發明的，這個方法也是目前最完美最簡潔的CSS垂直置中實現方法。下面來看看總結筆記，大家有不同意見請多拍磚:
該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>
完整代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS垂直置中-測試頁面</title>
<style>
p,div {
font-size:12px;
}
#outer {
height:400px;
display:table;
background-color: #E7F0FE;
overflow:hidden;
#position:relative;
padding:5px;
}
#middle {
display:table-cell;
vertical-align:middle;
#position:absolute;
#top:50%;
}
#inner {
#position:relative;
#top: -50%;
padding:3px;
}
.border {border:1px solid #BADFFE;}
a:link {
text-decoration:none;
color:#415CF5;
}
a:visited {
text-decoration:none;
color: #666666;
}
a:hover {
color:#FF3300;
text-decoration:underline;
}
</style>
</head>
<body>
<h1 style="font-family:微軟雅黑;color:#313131">CSS完美實現垂直置中-測試頁</h1>
<p style="color:red;">已測試通過的瀏覽器:IE5.0、IE5.5、IE6.0、IE7.0、IE8.0、FireFox、Opera7、Safari等...</p>
<div id="outer" class="border">
<div id="middle">
<div id="inner" class="border">
網站可用性研究 <br>
使用者體驗分析 <br>
網頁設計 <br>
Web標準 <br>
DIV+CSS </div>
</div>
</div>
<p>(在Demo原始碼中附加了一些用於修飾的CSS聲明，大家可以忽略)
經測試，該方法也適用於圖片垂直置中，建議大家在使用的時候定義好outer層的寬度。
</p>
</body>
</html>
from:
http://www.im85.cn/article/XHtml/129.htm
http://www.adobe-dreamweaver.cn/News/265.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
