首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

CSS文本和div垂直居中方法总结

所属分类： 网页制作 / CSS 阅读数： 1375
收藏 0 赞 0 分享

在样式布局中，我们经常碰到需要将元素居中。通过css实现元素的水平居中较为简单：对文本，只需要对其父级元素设置text-align: center;，而对div等块级元素，只需要设置其left和right的margin值为auto。要实现元素的垂直居中，有人会想到css中的vertical-align属性，但是它只对拥有valign特性的元素才生效，例如表格元素中的<td>、<th>、<caption>等，而像<div>、<span>这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用。因此我们需要通过别的方法去实现元素的垂直居中，下面我总结了几种了常用垂直居中方法。

单行文本垂直居中

对于单行文本，我们只需要将文本行高(line-height)和所在区域高度(height)设为一致即可：

XML/HTML Code复制内容到剪贴板
  1. <!--html代码-->  
  2.     <div id="div1">  
  3.         这是单行文本垂直居中   
  4.     </div>  
  5.   
  6. /*css代码*/   
  7.         #div1{   
  8.             width: 300px;   
  9.             height: 100px;   
  10.             margin: 50px auto;   
  11.             border: 1px solid red;   
  12.             line-height: 100px; /*设置line-height与父级元素的height相等*/   
  13.             text-align: center; /*设置文本水平居中*/   
  14.             overflow: hidden; /*防止内容超出容器或者产生自动换行*/   
  15.         }   

多行文本垂直居中

多行文本垂直居中分为两种情况，一个是父级元素高度不固定，随着内容变化；另一个是父级元素高度固定。

父级元素高度不固定

父级高度不固定的时，高度只能通过内部文本来撑开。这样，我们可以通过设置内填充（padding）的值来使文本看起来垂直居中，只需设置padding-top和padding-bottom的值相等：

XML/HTML Code复制内容到剪贴板
  1. <!--html代码-->  
  2.     <div id="div1">  
  3.             这是多行文本垂直居中，   
  4.             这是多行文本垂直居中，   
  5.             这是多行文本垂直居中，   
  6.             这是多行文本垂直居中。   
  7.     </div>  
  8.   
  9. /*css代码*/   
  10.         #div1{   
  11.             width: 300px;   
  12.             margin: 50px auto;   
  13.             border: 1px solid red;   
  14.             text-align: center; /*设置文本水平居中*/   
  15.             padding: 50px 20px;   
  16.         }   
  17.   

父级元素高度固定

本文一开始就提到css中的vertical-align属性，但是它只对拥有valign特性的元素才生效，结合display: table;，可以使得div模拟table属性。因此我们可以设置父级div的display属性：display: table;；然后再添加一个div包含文本内容，设置其display:table-cell;和vertical-align:middle;。具体代码如下：

XML/HTML Code复制内容到剪贴板
  1. <!--html代码-->  
  2.     <div id="outer">  
  3.         <div id="middle">  
  4.             这是固定高度多行文本垂直居中，   
  5.             这是固定高度多行文本垂直居中，   
  6.             这是固定高度多行文本垂直居中，   
  7.             这是固定高度多行文本垂直居中。   
  8.         </div>  
  9.     </div>  
  10.   
  11. /*css代码*/   
  12.         #outer{   
  13.             width: 400px;   
  14.             height: 200px;   
  15.             margin: 50px auto;   
  16.             border: 1px solid red;   
  17.             display: table;   
  18.         }   
  19.         #middle{    
  20.             display:table-cell;    
  21.             vertical-align:middle;     
  22.             text-align: center; /*设置文本水平居中*/     
  23.             width:100%;      
  24.         }   
  25.   

但是，在IE7中显示效果如下：

这是因为IE7及以下的版本并不能很好的支持display:table和display:table-cell属性，当然，如果你不考虑IE7以下的版本的浏览器，上述方法是可以实现垂直居中。如果把IE7及以下版本考虑进去，我们可以通过用到CSS hack的知识来设置针对不同浏览器的属性。

XML/HTML Code复制内容到剪贴板
  1. <!--html代码-->  
  2.     <div id="outer">  
  3.         <div id="middle">  
  4.             <div id="content">  
  5.                 这是固定高度多行文本垂直居中(兼容IE7)，   
  6.                 这是固定高度多行文本垂直居中(兼容IE7)，   
  7.                 这是固定高度多行文本垂直居中(兼容IE7)，   
  8.                 这是固定高度多行文本垂直居中(兼容IE7)。   
  9.             </div>  
  10.         </div>  
  11.     </div>  
  12.   
  13. /*css代码*/   
  14.         #outer{   
  15.             width: 400px;   
  16.             height: 200px;   
  17.             margin: 50px auto;   
  18.             border: 1px solid red;   
  19.             display: table;   
  20.             *position:relative;  //兼容IE7及以下版本   
  21.         }   
  22.         #middle{    
  23.             display:table-cell;    
  24.             vertical-align:middle;     
  25.             text-align: center; /*设置文本水平居中*/     
  26.             width:100%;   
  27.             *position:absolute;   //兼容IE7及以下版本   
  28.             *top:50%;     
  29.         }   
  30.         #content {     
  31.            *position:relative;  //兼容IE7及以下版本    
  32.            *top:-50%;     
  33.         }   
  34.   

子div垂直居中

1、根据子div具体大小设置偏移

如果子div固定大小，设定水平和垂直偏移父元素的50%，再根据实际长度将子元素向上和向左挪回一半大小

XML/HTML Code复制内容到剪贴板
  1. <!--html代码-->  
  2.     <div id="outer">  
  3.         <div id="middle">  
  4.             子div(固定大小)垂直居中   
  5.         </div>             
  6.     </div>  
  7.   
  8. /*css代码*/   
  9.         #outer{   
  10.                 background-color: #13CDF4;   
  11.                 width: 300px;   
  12.                 height: 200px;   
  13.                 position: relative;   
  14.         }   
  15.         #middle{    
  16.                 background-color: #E41627;   
  17.                 width: 100px;   
  18.                 height: 100px;   
  19.                 margin: auto;   
  20.                 position: absolute;   
  21.                 left: 50%;    
  22.                 top: 50%;   
  23.                 margin-left: -50px;   
  24.                 margin-top: -50px;   
  25.         }   
  26.   

该方法兼容IE7、IE6，但是只针对子div大小的固定的情况下才有效。大部分时候，子div的大小是不固定的，下面介绍子div大小不固定时的方法。由于显示效果与这个效果基本一样，效果图就不一一贴出来，读者可以自行复制代码验证。

2、利用translate

针对第一种方法中水平和垂直偏移父元素的50%后，不设置margin值，而是利用除css3中的transform属性设置translate的值，css代码部分改成如下：

CSS Code复制内容到剪贴板
  1. #middle{    
  2.         background-color: #E41627;   
  3.         width: 100px;   
  4.         height: 100px;   
  5.         margin: auto;   
  6.         position: absolute;   
  7.         left: 50%;    
  8.         top: 50%;   
  9.         transform: translateX(-50%) translateY(-50%);   
  10.         -webkit-transform: translateX(-50%) translateY(-50%);   
  11.     }   
  12.   

这种方法需要注意transform是css3中的属性，使用时注意浏览器的兼容性，IE9之前的版本不支持。

3、利用绝对布局absolute

XML/HTML Code复制内容到剪贴板
  1. <!--html代码-->  
  2.     <div id="outer">  
  3.         <div id="middle">  
  4.             利用绝对定位实现子div大小不固定垂直居中   
  5.         </div>             
  6.     </div>  
  7.   
  8. /*css代码*/   
  9.         #outer{   
  10.             background-color: #13CDF4;   
  11.             width: 300px;   
  12.             height: 200px;   
  13.             position: relative;   
  14.         }   
  15.         #middle{    
  16.             background-color: #E41627;   
  17.             width: 100px;   //子div大小可随意设置   
  18.             height: 100px;   
  19.             margin: auto;   
  20.             position: absolute;   
  21.             top: 0;left: 0;right: 0;bottom: 0;   
  22.         }   
  23.   

该方法不兼容IE7、IE6

4、利用vertical-align

XML/HTML Code复制内容到剪贴板
  1. <!--html代码-->  
  2.     <div id="outer">  
  3.         <div id="middle">  
  4.             利用vertical-align属性实现子div大小不固定垂直居中   
  5.         </div>             
  6.     </div>  
  7.   
  8. /*css代码*/   
  9.         #outer{   
  10.             background-color: #13CDF4;   
  11.             width: 300px;   
  12.             height: 200px;   
  13.             display: table-cell;    
  14.             vertical-align: middle;   
  15.         }   
  16.         #middle{    
  17.             background-color: #E41627;   
  18.             width: 100px;   
  19.             height: 100px;   
  20.             margin: 0 auto;   
  21.         }   
  22.   

这种方法是将div转变成table-cell显示，然后通过vertical-align: middle;再设置其子元素垂直居中，这种方法和上面设置父级元素高度固定时多行文本居中的方法一样，所以这种方法也不能兼容IE7、IE6。如果需要兼容IE7、IE6，可以参照上面的代码，上面设置父级元素高度固定时多行文本居中的方法其实就是将最里面的div垂直居中。这里我就不重述了。

5、利用display: flex

XML/HTML Code复制内容到剪贴板
  1. <!--html代码-->  
  2.     <div id="outer">  
  3.         <div id="middle">  
  4.             利用display: flex实现子div大小不固定垂直居中   
  5.         </div>             
  6.     </div>  
  7.   
  8. /*css代码*/   
  9.         #outer{   
  10.             background-color: #13CDF4;   
  11.             width: 300px;   
  12.             height: 200px;   
  13.             display: flex;   
  14.             justify-content: center;/*实现水平居中*/   
  15.             align-items:center; /*实现垂直居中*/   
  16.         }   
  17.         #middle{    
  18.             background-color: #E41627;   
  19.             width: 100px;   
  20.             height: 100px;   
  21.         }   
  22.   

这种方法只需要在父级div中加上这三句话就行，但是在IE中兼容性不好，IE9及以下IE浏览器版本都不支持。

以上是我总结的一些常用到的垂直居中的设计方法，大家可以根据自己的需要选择合适的设计方式。

原文链接：http://blog.csdn.net/u014607184/article/details/51820508

更多精彩内容其他人还在看

CSS配合JavaScript做酷的动态页面效果

　　利用CSS配合JavaScript的可以做很多更酷的动态页面效果，在本教程的最后给大家简单介绍一下CSS配合JS的应用。首先，要搞清楚事件和动作的概念。在客户端脚本中，JavaScript 通过对事件进行响应来获得与用户的交互。例如，当用户单击一个按钮或者在某段文字上移动鼠标
收藏 0 赞 0 分享

WEB标准,Web前端开发工程师必备技术列表

　　想要打造并拥有一流的Web产品开发团队，在团队成员基础能力上一定要下功夫。对于Web前端产品开发来说，仅仅掌握Web1.0时代简单的"网页套接"是完全不够的。我结合自己的团队配备，特此罗列了Web前端产品工程师所涉及的技能列表如下： 　　通过许多实际项目，
收藏 0 赞 0 分享

用CSS制作Alpha滤镜测试板

alpha滤镜给制作网页特效提供了较大的创作空间，但由于它控制参数较多，在实际应用时，为了确定一组合适的参数值，不得不反复调整修改，在编辑窗口和预览窗口来回倒腾，甚是麻烦，本文介绍了一种简单的方法。制作一个“Alpha滤镜参数测试板”，在测试板上输入参数
收藏 0 赞 0 分享

非常流行的所谓的气泡窗口

普通的Alt无法自定义风格,而Sweet Titles通过JS脚本与CSS的集合.自定义了这种伪Alt风格. 前一段时间非常流行的,就所谓的气泡窗口(鼠标移到链接处出现的). 我们这里实现的用的是Sweet Titles的插件.显示效果完全由CSS控制.. 先下载Sweet Ti
收藏 0 赞 0 分享

CSS教程：li和ul标签用法举例

LI代码的格式化: A).运用CSS格式化列表符： ul li{ list-style-type:none; } B).如果你想将列表符换成图像，则： ul li{ list-style-type:none; list-style-image: url(/blog/images/
收藏 0 赞 0 分享

CSS教程:CSS中的定位（position）

　　使用CSS来定位页面内层的位置，一直是比较难以掌握的事情，很多时候，往往被绝对定位的元素，总是以浏览器的左上角为坐标原点，此时，如果浏览器的大小改变，被定义的层就会偏离设计想要的位置，让人很挠头。 　　其实，要想控制好层的绝对定位，只要理解CSS中关于定位
收藏 0 赞 0 分享

CSS教程:盒模型(BOX Model)

　　如果想熟练掌握DIV和CSS的布局方法，首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子，盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin），如图1所示。
收藏 0 赞 0 分享

无延迟翻滚的图形与CSS混合风格按钮

　　在一个具有图形背景的按钮中添加CSS风格的文本，这种建立按钮的方法结合了具有CSS翻滚(CSS rollover)标记的开发速度和效率，从而有效地提高按钮外表图像的三维效果。 　　相比于常规的图形按钮，这些图形/CSS混合按钮可易于建立和载入，因为你只需要为空白按钮外面
收藏 0 赞 0 分享

css里expression实现界面对象的批量控制

用过css样式我们就知道, 可以定义一批对象的class属性来指定同一个样式来统一界面. 但如何统一同类型的对象的事件? 比如:界面有无数个 <img src="**.jpg"> 如何实现鼠标经过此图片, 图片的src变成是**_over.jpg?
收藏 0 赞 0 分享

CSS教程:水平对齐(text-align)

　　水平对齐（text-align），用以设定元素内文本的水平对齐方式。 　　1.语法 　　text-align具体参数如下： 语法：text-align:left|right|center|justify 说明：设定元素内文本的水平对齐方式。 参数：left:左
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 www.zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22