?一、單行文本垂直居中對齊方法

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

注意：overflow:hidden不可省略，以上數字自定義，此法不適應圖片

?

二、多行文本在未知容器內垂直居中對齊方法

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

注意：以上數字自定義，此法不適應圖片

?

?

三、多行文本在已知容器內垂直居中對齊方法

    .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"> 你需要的多行文本內容 </div> 
</div>
  

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

?

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

    <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;}
  

?

?

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

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

更新與（2010.12.2）

?

?

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

?

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

  

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

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

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

?

    #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失效問題，如gbk編碼*/ *display:block; 
} 
#wrap img{vertical-align:middle;} 
  

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

?

對于出現多佘的空標簽總會讓人感到結構不夠干凈，由方法五引發了如下解決方案

    .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; }
  

?

?此法見 dome2.html ，既使浮動也能實現垂直居中的效果? dome3.html

?

效果圖

?

最近會作一些關于CSS的總結，希望這篇文章能對讀者您有點幫助 ，如果有高深的見解，歡迎一起探討。

?

知識需要更新更需要總結，細節決定成敗！

總結垂直居中對齊的解決方案