?一、單行文本垂直居中對(duì)齊方法

    height:20px; 
line-height:20px; 
overflow:hidden;
  

注意：overflow:hidden不可省略，以上數(shù)字自定義，此法不適應(yīng)圖片

?

二、多行文本在未知容器內(nèi)垂直居中對(duì)齊方法

    padding-top:10px; padding-bottom:10px; 
  

注意：以上數(shù)字自定義，此法不適應(yīng)圖片

?

?

三、多行文本在已知容器內(nèi)垂直居中對(duì)齊方法

    .valign{ 
border:2px #666 solid; 
height:560px; 
display:table-cell; 
vertical-align:middle; 
} 
.edge{ 
display:inline; 
width:0; 
height:100%; 
zoom:1; 
vertical-align:middle; 
} 
.container{ 
display:inline; 
width:100%; 
zoom:1; 
vertical-align:middle; 
}?
  

?

    <div class="valign"> 
<div class="edge"></div> 
<div class="container"> 你需要的多行文本內(nèi)容 </div> 
</div>
  

? 注意：以上容器高度自定義，此法同樣適應(yīng)于圖片，但添加了額外的空標(biāo)簽

?

在固定寬高的容器里，要實(shí)現(xiàn)單行文字垂直居中，多行文字也做到垂直居中，方法是有的（沒(méi)有做不到，只有想不到），這句話再次證實(shí)是正確的。

    <div class="valign">
<span>未知圖片在固定容器里垂直水平居中方法未知圖片在固定容器里垂直水平居中方法</span>
</div>
  

?

    .valign{
	width:160px;
	height:114px;
	border:1px solid #ccc;
	display:table-cell;
	text-align:center;
	_font-size:100px;/*高度與字體大小比例是：1.14*/
	vertical-align:middle;
}
.valign span{vertical-align:middle;font-size:12px;}
  

?

?

此法原理其實(shí)跟方法五未知圖片在固定容器里垂直水平居中方法一樣，將未知行數(shù)的文字display:inline-block當(dāng)做圖片來(lái)用。

注意： 外層valign不適合浮動(dòng)；高度與字體大小比例是：1.14

更新與（2010.12.2）

?

?

四、固定高度圖片在未知容器里垂直居中對(duì)齊方法

?

    img{ 
position:absolute;
top:50%; 
margin-top:-10px; 
} 

  

    <img src="url" height="20"/>
  

注意：margin-top的負(fù)值是圖片高度的一半。
?

五、未知圖片在固定容器里垂直水平居中方法

?

    #wrap{ 
width:180px; 
height:200px; 
border:1px solid #ccc; 
/*水平居中*/ 
text-align:center;
 /*非IE瀏覽器下垂直居中*/ 
vertical-align:middle; 
display:table-cell; 
/* IE瀏覽器下垂直居中*/ 
*font-size:175; /*約為高度的0.873，200*0.873 約為175*/
*font-family:Arial; /*防止非utf-8引起的hack失效問(wèn)題，如gbk編碼*/ *display:block; 
} 
#wrap img{vertical-align:middle;} 
  

注意： 這里會(huì)出現(xiàn)一個(gè)問(wèn)題，當(dāng)wrap向左浮動(dòng)時(shí)，除了IE6與IE7，其它瀏覽器不能實(shí)現(xiàn)垂直居中，可以通過(guò)設(shè)置與wrap一樣高的行高，即line-height:200px;FF下實(shí)行了，但其它瀏覽器下仍不能實(shí)現(xiàn)。由此方法五引發(fā)的問(wèn)題，可以不設(shè)置wrap浮動(dòng)，而是在其外定義一個(gè)向左浮動(dòng)的空盒子。見(jiàn)附件 dome1.html 文件

?

對(duì)于出現(xiàn)多佘的空標(biāo)簽總會(huì)讓人感到結(jié)構(gòu)不夠干凈，由方法五引發(fā)了如下解決方案

    .wrap{ 
width:160px;
height:200px; 
border:1px solid #ccc; 
line-height:200px; 
text-align:center; 
font-size:12px; 
_font-size:175px;/*約為高度的0.873，200*0.873 約為175*/} 
.wrap img{ vertical-align:middle; }
  

?

?此法見(jiàn) dome2.html ，既使浮動(dòng)也能實(shí)現(xiàn)垂直居中的效果? dome3.html

?

效果圖

?

最近會(huì)作一些關(guān)于CSS的總結(jié)，希望這篇文章能對(duì)讀者您有點(diǎn)幫助 ，如果有高深的見(jiàn)解，歡迎一起探討。

?

知識(shí)需要更新更需要總結(jié)，細(xì)節(jié)決定成敗！

總結(jié)垂直居中對(duì)齊的解決方案