也谈垂直居中

网上谈垂直居中的人很多了，我就当学习一下了。说实话，还没怎么用过。

<!DOCTYPE HTML>
<html>
<head>
<meta  charset="utf-8" />
<style type="text/css">
div{border:1px solid;margin:10px 20px;}
img{border:1px solid;}


.l1{height:100px;line-height:100px;}
.l2{padding:20px 0;}
.l3{height:80px;display:table-cell;vertical-align:middle;}
.l4{height:80px;}
.l4 span{display:inline-block;height:100%;vertical-align:middle;}


.l5{height:80px;}
.l5 p{height:40px;margin-top:expression(parseInt(this.currentStyle.height)/2)}
.l6{height:80px;}
.l6 span{height:100%;writing-mode:tb-rl;text-align:center;}
</style>
</head>
<body>

<div class="l1">
	<strong>line-height方法</strong>，只对文字a,label,input元素有效，对图片无效.ie6对input无效。
	<abbr title="">abbr</abbr>
	<label for="">lable</label>
</div>


<div class="l2">
	<strong>padding-top,padding-bottom方法</strong>
	高度没设置！！！无任何兼容问题
	<input/>
	<abbr title="">abbr</abbr>
	<label for="">lable</label>
</div>

<div class="l3">
	<strong >table-cell方法</strong>
	<img style="vertical-align:middle;" src="http://images.cnblogs.com/logo_small.gif" alt="博客园" />
	缺点很多，ie6，7不兼容，下面的margin都没了。
</div>

<div class="l4">
	<span></span><strong>display:inline-block,vertical-align:middle方法</strong>
	通过设置一个元素高度为100%；其他元素就都可以居中
</div>

<hr style="color:red;margin:20px 0;"/>

<div class="l5">
<p><strong>ie6-7,通过expression表达式</strong></p>
</div>

<div class="l6"><span>
<img style="vertical-align:middle;" src="http://images.cnblogs.com/logo_small.gif" alt="博客园" /></span>
</div>






</body>
</html>

line-height方法，只对文字a,label,input元素有效，对图片无效.ie6对input无效。 abbr lable

padding-top,padding-bottom方法 高度没设置！！！无任何兼容问题 abbr lable

table-cell方法 博客园

缺点很多，ie6，7不兼容。

display:inline-block,vertical-align:middle方法 通过设置一个元素高度为100%；其他元素就都可以居中

ie6-7,通过expression表达式