一个水平居中,垂直居中的demo

<!DOCTYPE> 
<html> 
<head> 
<meta content="text/html; charset=utf-8" /> 
<style> 
body {padding:0; margin:0; } 
html,body{ height:100%;} 
.infoBox{text-align:center; width:100%; height:100%; display:table;} 
.info{ display:table-cell;vertical-align:middle;}
*html .infoBox{ position:absolute; top:50%; width:100%; text-align:center; display:block; height:auto} 
*html .info{position:relative; top:-50%; text-align:center;} 
.tnnd{ border:1px solid red; width:500px; margin:0 auto; font-size:12px; line-height:1.8;} 
</style> 
</head> 
<body> 
<div class="infoBox"> 
  <div class="info"> 
    <div class="tnnd"> 
        啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
        啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    </div> 
  </div> 
</div> 
</body> 
</html>


你可能感兴趣的:(垂直居中)