1.單行文本的垂直居中
div {
height:25px;
line-height:25px;
}
2.多行文本高度不固定的居中
div {
padding:25px;
}
3.多行文本的高度固定居中
CSS中的vertical-align屬性只會對擁有valign特性的(X)HTML標簽起作用，但是在CSS中還有一個display屬性能夠模擬<table>，所以我們可以使用這個屬性來讓<div>模擬<table>就可以使用vertical-align了。注意，display:table和display:table-cell的使用方法，前者必須設置在父元素上，后者必須設置在子元素上，因此我們要為需要定位的文本再增加一個<div>元素：
<head>
<title> 多行文字實現(xiàn)垂直居中 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { font-size:12px;font-family:tahoma;}
div#wrap {
height:400px;
width: 400px;
display:table;
}
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
background-color:#FFCCFF;
width: 400px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="content">現(xiàn)在我們要使這段文字垂直居中顯示！
現(xiàn)在我們要使這段文字垂直居中顯示！ 現(xiàn)在我們要使這段文字垂
直居中顯示！ 現(xiàn)在我們要使這段文字垂直居中顯示！
現(xiàn)在我們要使這段文字垂直居中顯示！
</div>
</div>
</body>
4.多行文本高度固定兼容性問題
在Internet Explorer 6及以下版本中，在高度的計算上存在著缺陷的。在Internet Explorer 6中對父元素進行定位后，如果再對子元素進行百分比計算時，計算的基礎似乎是有繼承性的（如果定位的數(shù)值是絕對數(shù)值沒有這個問題，但是使用百分比計算的基礎將不再是該元素的高度，而從父元素繼承來的定位高度）。
.outer {
display:table; width:578px; overflow:hidden;
background: #eee; height: 42px;
}
.middle {display:table-cell; vertical-align:middle; margin-left 10px;}
/*下面的CSS是針對IE7，IE6*/
<!--[if lte IE 7]>
<style>
.outer{position:relative;}
.middle{position: absolute; top: 50%;}
.inner{position: relative; top:-50%}
</style>
<![endif]-->
1.利用line-height實現(xiàn)多行文本居中
每行文字都有一個line boxes包裹，具體大小由line boxes決定。其實line boxes不是直接的生產者，屬于中層干部，真正的活兒都是它的手下 – inline boxes干的，這些手下就是文字啦，圖片啊，span之類的inline屬性的標簽啦。
line boxes只是個考察匯報人員，考察它的手下誰的實際line-height值最高，誰最高，它就要誰的值，然后向上匯報，形成高度。例如，<span style="line-height:20px;">取手下line-height<span style="line-height:40px;">最高</span>的值</span>。則line boxes的高度就是40像素了。
如下圖所示，右邊的空格是為了撐開div，給span添加inline-box是為了是元素具有單行效果，只有一個inline box；
Paste_Image.png
.mulit_line{line-height:150px; border:1px dashed #cccccc; padding-left:5px;}
.mulit_line span{display:-moz-inline-stack; display:inline-block; line-height:1.4em; vertical-align:middle;}
.mulit_line i{width:0; display:-moz-inline-stack; display:inline-block; vertical-align:middle; font-size:0;}
<p class="mulit_line">
<span style="font-size:12px;">這里是高度為150像素的標簽內的
多行文字，文字大小為12像素。
<br />這里是第二行，用來測試多行的顯示效果。</span><i> </i>
</p>
2.同理實現(xiàn)圖片的居中
Paste_Image.png
.zxx_ul_image{overflow:hidden; zoom:1;}
.zxx_ul_image li{float:left; width:150px; height:150px; text-align:center; line-height:150px;}
.zxx_ul_image li:after{content:' '; vertical-align:middle;}
.zxx_ul_image li img{vertical-align:middle;}
<ul class="zxx_ul_image">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
