寫這篇文章是因?yàn)橐嫒軮E6、IE7的問題，我們都知道一行文字時(shí)可以通過line-height來設(shè)置垂直居中，如果是多行這個(gè)肯定不行，而我的同事因?yàn)檫@個(gè)用了JS來實(shí)現(xiàn)居中對(duì)齊，我覺得這是很難理解的。故而整理這篇文章。

html代碼：

<div class="middle-box">

<div class="middle-inner">

<p><span class="suc-tip">前端開發(fā)博客，專注前端開發(fā)和web教程</span><br/><span class="suc-link">快捷入口：<a href="http://caibaojian.com">http://caibaojian.com</a></span></p>

<p style="display:none;"><span class="suc-tip">5年的老博客，一直致力于WEB開發(fā)</span></p>

</div>

</div>

第一種：display:table的方法

.middle-box{display: table; height: 300px;}

.middle-inner{display: table-cell; vertical-align:middle; text-align:center;}

缺點(diǎn)就是不兼容ie6、ie7.怎么兼容呢？

當(dāng)然是用另外一種相對(duì)定位和絕對(duì)定位的方式。

<!--[if lt IE 8]>

<style>

.middle-inner { position: absolute; top:50%;}

.middle-inner p {position: relative; top: -50%}

</style>

<![endif]-->

可以使用IE的特有的條件語(yǔ)法，不過我習(xí)慣用ie hack來寫。下面這個(gè)的代碼實(shí)現(xiàn)了水平垂直多行代碼（支持一行）居中對(duì)齊。目前測(cè)試IE、chrome和Firefox均兼容。代碼如下：

.middle-box{display: table; height: 300px; border:1px solid #ff0000; width:400px; margin:0 auto; position:relative;}

.middle-inner{display: table-cell; vertical-align:middle; *position:absolute; *top:50%; *left:50%; width:100%; text-align:center;}

.middle-inner p{position:relative; *top:-50%; *left:-50%;}

以后遇到居中問題，這三句CSS就夠用了。更多的css3 flexbox、margin負(fù)值等兼容性還需要探討。

第二種方法：增加一個(gè)空白標(biāo)簽

HTML代碼：

<div class="middle-box">

<p><span class="suc-tip">前端開發(fā)博客，專注前端開發(fā)和web教程</span><br/><span class="suc-link">快捷入口：<a href="http://caibaojian.com">http://caibaojian.com</a></span></p>

<i class="visible"></i>

<p style="display:none;"><span class="suc-tip">5年的老博客，一直致力于WEB開發(fā)</span></p>

</div>

CSS代碼：

.middle-box{height:300px; border: 1px solid #f00; width: 400px; margin: 0 auto; text-align: center; }

.middle-box p{vertical-align: middle; display: inline-block; *display: inline; *zoom: 1;}

.visible{height: 100%; vertical-align: middle; width: 0; display: inline-block;}