div垂直居中 

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
   * { margin:0; padding:0; list-style:none; font-size:14px;}/*---该css reset仅用于demo，请自行换成适合您自己的css reset---*/
   html { height:100%;}
   body { height:100%; text-align:center;}
   .centerDiv { display:inline-block; zoom:1; *display:inline; vertical-align:middle; text-align:center; width:200px; padding:10px; border:1px solid #f60; background:#fc0;}
   .hiddenDiv { height:100%; overflow:hidden; display:inline-block; width:1px; overflow:hidden; margin-left:-1px; zoom:1; *display:inline; *margin-top:-1px; _margin-top:0; vertical-align:middle;}
  </style>
 </head>
 <body>
<div class="centerDiv">
   垂直居中，左右居中<br/>
   垂直居中，左右居中<br/>
   垂直居中，左右居中<br/>
   垂直居中，左右居中<br/>
   垂直居中，左右居中<br/>
   垂直居中，左右居中<br/>
   垂直居中，左右居中<br/>
   垂直居中，左右居中<br/>
   垂直居中，左右居中<br/>
   垂直居中，左右居中<br/>
   垂直居中，左右居中<br/>
   垂直居中，左右居中<br/>
  </div><div class="hiddenDiv"></div>
 </body>
</html>

 

posted @ 2015-11-26 18:09  Earic  阅读(185)  评论(0)  编辑  收藏  举报