DIV居中

zhouguizhi 2013-05-06

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> 多行文字实现垂直居中 </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
 body { font-size:12px;font-family:tahoma;}
 div#wrap {
  display:table;
  border:1px solid #FF0099;
  background-color:#FFCCFF;
  width:100%;
  height:100%;
  _position:relative;
  overflow:hidden;
 }
 div#subwrap {
  vertical-align:middle;
  display:table-cell;
  _position:absolute;
  _top:50%;
 }
 div#content { 
  _position:relative;
  _top:-50%;
  text-align:center;
 }
 div#centerdiv { 
 position:absolute;
 top:50%;
 left:50%;
 margin:-100px 0 0 -100px;
 width:200px;
 height:200px;
 border:0px solid red;
}  
  </style>
 </head>
 <body>
 <div id="centerdiv">
 <div id="wrap">
  <div id="subwrap">
   <div id="content" ><pre>现在我们要使这段文字垂直居中显示!
</pre>
  </div>
 </div>
</div>
</div>
 </body>
</html>

相关推荐