总结垂直居中对齐的解决方案

 一、单行文本垂直居中对齐方法

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的总结，希望这篇文章能对读者您有点帮助 ，如果有高深的见解，欢迎一起探讨。

 

知识需要更新更需要总结，细节决定成败！