kiinlam
4/25/2014 - 2:30 AM

文本垂直居中

文本垂直居中

vertical_middle.html
content_copyfile_download
<!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>