kiinlam/vertical_middle.html

## vertical_middle.html
<!DOCTYPE HTML>
<html>
<head>
<title>ie中垂直居中</title>
<meta charset=UTF-8">
<style type="text/css">
#div1{
   width:300px;
   position:absolute;
   border:1px solid #000;
      top:100px;
   left:200px;
   display:table;
}

.div2{
   display:table-cell;
   vertical-align:middle;
   *position:absolute;
   *top:50%;
}

span{
   *position:relative;
   *top:-50%;
}
button{
   cursor:pointer;
}
</style>
<script>
   function add(){
       var div1=document.getElementById('div1');
       var h=div1.offsetHeight;
       div1.style.height=h+30+'px';
   }
   function reduce(){
       var div1=document.getElementById('div1');
       var h=div1.offsetHeight;
       div1.style.height=h-30+'px';
   }
</script>
</head>
<body>
<div id="div1" style="height:200px">
   <div class="div2">
       <span>IE6/7使用定位关系来垂直居中，IE8/9使用display:table和display:table-cell</span>
   </div>
</div>
<button type="button" id="add" onclick="add()">增加高度</button><br/><br/>
<button type="button" id="reduce" onclick="reduce()">减少高度</button>
</body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<title>ie中垂直居中</title>
	<meta charset=UTF-8">
	<style type="text/css">
	#div1{
	width:300px;
	position:absolute;
	border:1px solid #000;
	top:100px;
	left:200px;
	display:table;
	}

	.div2{
	display:table-cell;
	vertical-align:middle;
	*position:absolute;
	*top:50%;
	}

	span{
	*position:relative;
	*top:-50%;
	}
	button{
	cursor:pointer;
	}
	</style>
	<script>
	function add(){
	var div1=document.getElementById('div1');
	var h=div1.offsetHeight;
	div1.style.height=h+30+'px';
	}
	function reduce(){
	var div1=document.getElementById('div1');
	var h=div1.offsetHeight;
	div1.style.height=h-30+'px';
	}
	</script>
	</head>
	<body>
	<div id="div1" style="height:200px">
	<div class="div2">
	<span>IE6/7使用定位关系来垂直居中，IE8/9使用display:table和display:table-cell</span>
	</div>
	</div>
	<button type="button" id="add" onclick="add()">增加高度</button><br/><br/>
	<button type="button" id="reduce" onclick="reduce()">减少高度</button>
	</body>
	</html>