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

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

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

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

二、多行未知高度文字的垂直居中

    如果一段内容，它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中时使用到的最后一种方法，就是设定Padding，使上下的padding值相同即可。同样的，这也是一种“看起来”的垂直居中方式，它只不过是使文字把<div>完全填充的一种访求而已。可以使用类似下面的代码：

div {  
   padding:25px;  
}

    这种方法的优点就是它可以在任何浏览器上运行，并且代码很简单，只不过这种方法应用的前提就是容器的高度必须是可伸缩的。

<!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 {
  padding:25px;
  border:1px solid #FF0099;
  background-color:#FFCCFF;
  width:760px;
}
  </style>
</head>
<body>
  <div><pre>现在我们要使这段文字垂直居中显示！
   div {
  padding:25px;
  border:1px solid #FF0099;
  background-color:#FFCCFF;
}
</pre></div>


</body>
</html>

三、多行文本固定高度的居中

    在本文的一开始，我们已经说过CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用，但是在CSS中还有一个display属性能够模拟<table>，所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了。注意，display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个<div>元素：

div#wrap {  
    height:400px;  
    display:table;  
}  
div#content {  
   vertical-align:middle;  
   display:table-cell;  
   border:1px solid #FF0099;  
   background-color:#FFCCFF;  
   width:760px;  
}

下面是完整的HTML测试代码：

<!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 {
  height:400px;
  display:table;
}
div#content {
  vertical-align:middle;
  display:table-cell;
  border:1px solid #FF0099;
  background-color:#FFCCFF;
  width:760px;
}
  </style>
</head>
<body>
<div id="wrap">
  <div id="content"><pre>现在我们要使这段文字垂直居中显示！ Webjx.Com
div#wrap {
  height:400px;
  display:table;
}
div#content {
  vertical-align:middle;
  display:table-cell;
  border:1px solid #FF0099;
  background-color:#FFCCFF;
  width:760px;
}
</pre></div>
</div>
</body>
</html>
【发表评论0条 】
网友评论(共?条评论)..
CSS使DIV内容垂直居中的方法