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

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

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

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

使用DIV设计模仿Windows的弹出对话框，经常需要使DIV中的内容水平、垂直居中。DIV水平居中的方法很简单，直接使用如下代码即可：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>div居中 在线演示 www.divcss5.com</title> 
<style> 
body{ text-align:center} 
.div{ margin:0 auto; width:400px; height:100px; border:1px solid #F00} 
/* css注释：为了观察效果设置宽度 边框 高度等样式 */ 
</style> 
</head> 
<body> 
<div class="div"> 
DIVCSS5实例 
</div> 
</body> 
</html>

谈到垂直居中，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不支持我只需做少许的CSSHack技术就可以啊！但事实却不是这么简单，CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有valign特性的元素才生效，例如表格元素中的<td>、<th>、<caption>等，而像<div>、<span>这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用。

下面介绍几种使DIV内容chuizhi垂直居中的方法：

一、单行内容垂直居中

如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可。

如：

div {  
        height:25px;  
        line-height:25px;  
        overflow:hidden;  
}

    这段代码很简，后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行，这样就达不到垂直居中效果了。

<!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 {
  height:25px;
  line-height:25px;
  border:1px solid #FF0099;
  background-color:#FFCCFF;
}
  </style>
</head>
<body>
  <div>现在我们要使这段文字垂直居中显示！</div>
</body>
</html>
【发表评论0条 】
网友评论(共?条评论)..
CSS使DIV内容垂直居中的方法