您的位置：站点首页 > 技术文章 >正文

CSS使DIV内容垂直居中的方法

2014-07-07 19:18:02|?次阅读|上传:wustguangh【已有?条评论】发表评论

关键词：HTML/CSS, Web, 界面设计|来源：唯设编程网

至此，一个完美的居中方案就产生了。

<!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:760px;
  height:400px;
  _position:relative;
  overflow:hidden;
}
div#subwrap {
  vertical-align:middle;
  display:table-cell;
  _position:absolute;
  _top:50%;
}
div#content {
  _position:relative;
  _top:-50%;
}
  </style>
</head>
<body>
<div id="wrap">
  <div id="subwrap">
   <div id="content"><pre>现在我们要使这段文字垂直居中显示！
div#wrap {
  border:1px solid #FF0099;
  background-color:#FFCCFF;
  width:760px;
  height:500px;
  position:relative;
}
div#subwrap {
  position:absolute;
  border:1px solid #000;
  top:50%;
}
div#content {
  border:1px solid #000;
  position:relative;
  top:-50%;
}</pre>
  </div>
</div>
</div>
</body>
</html>

     注意：垂直居中vertical-align的值是middle，而水平居中align的值是center，虽然同是居中但关键字是不一样的。

    上面对DIV中内容垂直居中的各种方法进行了介绍，并且最后总结了最优方案，欢迎大家提出更多更好的想法……

【发表评论0条 】
网友评论(共?条评论)..
CSS使DIV内容垂直居中的方法