垂直居中


http://blog.csdn.net/chinmo/archive/2008/02/15/2097693.aspx

<html> 
<head> 
<style type="text/css"> 
body {padding: 0; margin: 0; height:100%;}  
body,html{height: 100%;}  
.big { width:400px; background-color:#eeeeee;} 
.left { height:100%; overflow: hidden; position: relative; width:250px; background-color:#ff0000; float:left;} 
.right { width:150px; background-color:#00ffff; float:right;} 

#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory;}  
#outer[id] {display: table; position: static;}  

#middle {position: absolute; top: 50%;} /* for explorer only*/  
#middle[id] {display: table-cell; vertical-align: middle; position: static;}  

#inner {position: relative; top: -50%;width: 400px;margin: 0 auto;} /* for explorer only */  

div.greenBorder {border: 1px solid green; background-color:#aaaaaa;} 
} 
</style> 
</head> 
<body> 
<div class="big"> 
<div class="left"> 
  <div id="middle">  
  <div id="inner" class="greenBorder"> 
  测试A 
  </div>  
  </div>  
</div> 
<div class="right"> 
测试B <br />测试B <br /> 
测试B <br /> 
</div> 
</div> 
</body> 
</html>
posted @ 2010-10-09 15:11  {前端开发}  阅读(191)  评论(0)  编辑  收藏  举报