发帖
扫码访问
 注册
 登录
首页 ›电脑› 电脑学堂 › 查看内容

CSS教程之div垂直居中的多种方法

2016-5-6 12:53 2580 0

摘要: 在说到这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊！所以在这里我还要啰嗦两句，CSS中的确是有vertical-align属性， ...

在说到这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊！所以在这里我还要啰嗦两句，CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有valign特性的元素才生效，例如表格元素中的<td>、<th>、<caption>等，而像<div>、<span>这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用。

一、单行垂直居中

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

如：

CSS Code复制内容到剪贴板
  1. div {      
  2.         height:25px;      
  3.         line-height:25px;      
  4.         overflow:hidden;      
  5.  }      
  6.   

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

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.  <head>  
  4.   <title> 单行文字实现垂直居中 </title>  
  5.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6.   <style type="text/css">  
  7.  body { font-size:12px;font-family:tahoma;}   
  8.  div {   
  9.   height:25px;   
  10.   line-height:25px;   
  11.   border:1px solid #FF0099;   
  12.   background-color:#FFCCFF;   
  13.  }   
  14.   </style>  
  15.  </head>  
  16.  <body>  
  17.   <div>现在我们要使这段文字垂直居中显示！</div>  
  18.  </body>  
  19. </html>  
  20.   

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

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

CSS Code复制内容到剪贴板
  1. div {      
  2.  padding:25px;      
  3. }      
  4.   

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

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.  <head>  
  4.   <title> 多行文字实现垂直居中 </title>  
  5.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6.   <style type="text/css">  
  7.  body { font-size:12px;font-family:tahoma;}   
  8.  div {   
  9.   padding:25px;   
  10.   border:1px solid #FF0099;   
  11.   background-color:#FFCCFF;   
  12.   width:760px;   
  13.  }   
  14.   </style>  
  15.  </head>  
  16.  <body>  
  17.   <div><pre>现在我们要使这段文字垂直居中显示！   
  18.    div {   
  19.   padding:25px;   
  20.   border:1px solid #FF0099;   
  21.   background-color:#FFCCFF;   
  22.  }   
  23. </pre></div>  
  24. </body>  
  25. </html>  
  26.   

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

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

CSS Code复制内容到剪贴板
  1. div#wrap {      
  2.     height:400px;      
  3.  display:table;      
  4. }      
  5. div#content {      
  6.   vertical-align:middle;      
  7.     display:table-cell;      
  8.    border:1px solid #FF0099;      
  9.  background-color:#FFCCFF;      
  10.  width:760px;      
  11. }     
  12.   
XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.  <head>  
  4.   <title> 多行文字实现垂直居中 </title>  
  5.   <meta http-equiv="Content-Type"  声明：文章版权归原作者所有 部分文章转自互联网 如有侵权请联系 [邮箱地址] 删除

路过
雷人
握手
鲜花
鸡蛋
收藏 分享 邀请
上一篇：关于php中一些字符串总结下一篇：用div+css3画小丸子和爷爷

最新评论

相关分类

返回顶部