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> 多行文字实现垂直居中 </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">现在我们要使这段文字垂直居中显示！
现在我们要使这段文字垂直居中显示！ 现在我们要使这段文字垂
直居中显示！ 现在我们要使这段文字垂直居中显示！
现在我们要使这段文字垂直居中显示！
</div>
</div>
</body>
4.多行文本高度固定兼容性问题
在Internet Explorer 6及以下版本中，在高度的计算上存在着缺陷的。在Internet Explorer 6中对父元素进行定位后，如果再对子元素进行百分比计算时，计算的基础似乎是有继承性的（如果定位的数值是绝对数值没有这个问题，但是使用百分比计算的基础将不再是该元素的高度，而从父元素继承来的定位高度）。
.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实现多行文本居中
每行文字都有一个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.同理实现图片的居中
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>
