这里介绍实现元素垂直居中的方式，文章是参考了《css制作水平垂直居中对齐》这一篇文章。

1.行高和高度实现

这种方式实现单行垂直居中是很简单的，但是要保证元素内容是单行的，并且其高度是不变的，只要将“line-height”和“height”设置成一样的就可以了。这种方式局限性在于只有单行文本的元素才适用，多行元素是不适用的。

html代码：

  1. <div class="vertical">
  2.     <span>aaa</span>content
  3. </div>

css代码：

  1.         .vertical {
  2.             height: 100px;
  3.             line-height: 100px;
  4.         }

效果：

缺点：这里“aaa”内容包含在span中，span是行内元素，所以仍然是一行，换成div就不行了。这种方式仅仅适合在文本和图片上，并且文本不再是单行时，效果不好。在一些小元素上还是很合适的，比如一个button，image，或者单行文本，h1上。

2.容器绝对定位

这种方法需要给容器设置绝对定位，position:absolute，并且定位高度（top:50%），margin-top为高度的一半（margin-top:-height/2）。这就意味着元素必须要有一个固定的高度，这样一来给元素设置了固定高度，如果又设置overflow:auto，当元素内容超过容器后，元素就会出现滚动，而不会自适应内容高度。
html代码：

  1. <div class="vertical">
  2.     content
  3. </div>

css代码：

  1.         .vertical {
  2.             height: 100px; /*元素高度*/
  3.             position: absolute; /* 绝对定位 */
  4.             left: 50%; /*配合margin-left的负值实现水平居中*/
  5.             top: 50%; /* 元素的顶部边界离父元素的位置是父元素高度的一半 */
  6.             margin-top: -50px; /*设置元素顶边负边距，大小为元素高度的一半*/
  7.         }

效果如下：


缺点：这种方式可以在各种浏览器下工作，解构简单明了，不需要额外添加标签。但是由于固定死元素的高度，只是没有足够的空间，当内容超过容器大小时，要么会出现滚动条（如果元素在body内，当用户缩小浏览器窗口时，body的滚动条将不会出现），要么会消失。

这种方式针对多行元素来进行垂直居中，而且并非是此元素的内容垂直居中。另外此方法是通过绝对定位来实现的，要注意下面几点：其一元素定位关系到一个相对定位参考，所以要保证元素是相对那一个参考坐标；另外需要给元素设置一个明确的高度值，并给元素设置一个margin-top，而且其值为元素高度的一半。最好还要给元素一个宽度，因为绝对定位后脱离文档流，其宽度是根据元素内容所占的宽度来计算了，为了能让视觉效果更好，最好设置一个宽度值。

照葫芦画瓢，还可以设置元素水平居中，css代码如下：

  1.         .vertical {
  2.             height: 100px; /*元素高度*/
  3.             width: 100px; /*元素宽度*/
  4.             position: absolute; /* 绝对定位 */
  5.             left: 50%; /*配合margin-left的负值实现水平居中*/
  6.             top: 50%; /* 元素的顶部边界离父元素的位置是父元素高度的一半 */
  7.             margin-top: -50px; /*设置元素顶边负边距，大小为元素高度的一半*/
  8.             margin-left: -50px; /*设置元素左边负边距，大小为宽度的一半*/
  9.         }

这种方式可以实现元素水平居中，长用于页面在中间的布局，使用这种方式要注意：水平垂直居中的元素要有明确大小（就是要有明确的高度，宽度值）；给元素进行绝对定位，并设置left，top值为50%（最好使用绝对定位，如果只是水平居中，可以换成相对定位）；最后设置margin-top和margin-left的负值，大小为元素宽度和高度的一半。

3.div模拟表格

这种方法是使用div模拟表格效果，也就是将多个div的“display”属性设置为“table”和“table-cell”，并设置他们的“vertical-align”属性为“middle”。参考《The display declaration》这篇文章。

html代码如下：

  1. <div id="container">
  2.     <div id="content">content</div>
  3. </div>

css代码：

  1.         #container {
  2.             height: 300px;
  3.             display: table; /*让元素以表格形式渲染*/
  4.         }
  5.  
  6.         #content {
  7.             display: table-cell; /*让元素以表格的单元格形式渲染*/
  8.             vertical-align: middle; /*使用元素的垂直对齐*/
  9.         }

效果如下：

缺点：这种方式不会像上面两种一样有高度的限制，可以根据元素的内容改变高度，从而没有空间的限制，元素的内容不会因为没有足够的空间而被切断或者出现难看的滚动条。但是这种方法只适合于现代浏览器，IE6-7无法正常运行，因为IE6-7不支持display:table，为了解决问题，需要额外增加一个div，并且使用hack，如下：

html代码：

  1. <div class="table">
  2.     <div class="tableCell">
  3.         <div class="content">content</div>
  4.     </div>
  5. </div>

css代码：

  1. .table {
  2.             height: 300px; /*高度值不能少*/
  3.             width: 300px; /*宽度值不能少*/
  4.             display: table;
  5.             position: relative;
  6.             float: left;
  7.         }
  8.  
  9.         .tableCell {
  10.             display: table-cell;
  11.             vertical-align: middle;
  12.             text-align: center;
  13.             padding: 10px;
  14.             *position: absolute;
  15.             *top: 50%;
  16.             *left: 50%;
  17.         }
  18.         .content {
  19.             *position: relative;
  20.             *top: -50%;
  21.             *left: -50%;
  22.         }

这里使用了“*”标记来兼容IE6-7浏览器

 4.使用空的<div>元素

这种方式比较新奇，在需要居中的元素前面放一个<div>（块元素即可），然后设置这个<div>的高度为50%，margin-bottom为元素高度的一半，并且居中元素需要清除浮动。要注意使用这种方式，如果居中元素放在body中的话，需要给html，body设置一个“height:100%”的属性。

html代码：

  1. <body>
  2.   <div id="floater"><!--This block have empty content--></div>
  3.   <div id="content">Content section</div>
  4. </body>

css代码：

  1.         html, body {
  2.             height: 100%
  3.         }
  4.  
  5.         #floater {
  6.             float: left;
  7.             height: 50%; /*相对父元素高度的50%*/
  8.             margin-bottom: -120px; /*值大小为居中元素高度的一半*/
  9.         }
  10.  
  11.         #content {
  12.             clear: both; /*清除浮动*/
  13.             height: 240px;
  14.             position: relative;
  15.         }

效果：

缺点：这种方式能兼容所有浏览器，在没有足够空间下，内容不会被切掉。但是也有缺点，元素高度被固定死，无法达到内容自适应高度，如果居中元素加上overflow属性，要么元素出现滚动条，要么被切掉。另外还有一个缺点，就是额外添加了一个空标签。

5.盒模型

这种方法和第三种一样使用display:table-cell，不同之处在于需要一个盒模型。为了实现兼容IE，需要增加一个行内标签，比如“span”（最好使用行内标签，不能使用块标签，否则没有效果），并把这个盒模型高度设置为100%，原理可以参考《大小不固定的图片，多行文字的水平垂直居中》。

html代码：

  1. <p class="table">
  2.         <span class="tableCell">
  3.             Centering multiple lines <br> in a block container.
  4.         </span>
  5.     <!--[if lte IE 7]><b></b><![endif]-->
  6. </p>

css代码：

  1. <style type="text/css">
  2.      .table {
  3.             border: 1px solid orange;
  4.             display: table;
  5.             height: 200px;
  6.             width: 200px;
  7.             text-align: center;
  8.         }
  9.  
  10.         .tableCell {
  11.             display: table-cell;
  12.             vertical-align: middle;
  13.         }
  14. </style>
  15.     <!--[if lte ie 7]>
  16.     <style type="text/css">
  17.         /*第五种方法*/
  18.         .tableCell {
  19.             display: inline-block;
  20.         }
  21.  
  22.         b {
  23.             display: inline-block;
  24.             height: 100%;
  25.             vertical-align: middle;
  26.             width: 1px;
  27.         }
  28.     </style>
  29.     <![endif]-->

效果：

缺点：和第三种方法一样，这种方法不会有高度的限制。缺点是这种方法为了让IE正常运行，需要额外增加一些标签，另外就是盒模型的标签有类型限制，只能添加行内标签。

6.inline-block方法

这个种方式采用的是display:inline-block，然后借助另一个元素的高度来实现居中。

html代码：

  1. <div id="parent">
  2.     <div id="vertically_center">
  3.         <p>I am vertically centered!</p>
  4.     </div>
  5.     <div id="extra"></div>
  6. </div>

css代码：

  1.         html,body{
  2.             height: 100%;
  3.         }
  4.         #parent {
  5.             height: 500px; /*定义高度，让线盒模div#eatra有一个参照物，可以是固定值，也可以是参照物*/
  6.             border: 1px solid red;
  7.         }
  8.         #vertically_center,#extra {
  9.             display: inline-block; /*把元素转为行内元素显示*/
  10.             vertical-align: middle; /*垂直居中*/
  11.         }
  12.         #extra {
  13.             height: 100%;
  14.         }
  15.     <!--[if lt IE 8]>
  16.         <style type="text/css">
  17.             /*IE6-7不支持display:inline-block，所以在ie6-7另外写一个hack，用来支持ie6-7*/
  18.             #vertically_center, #extra {
  19.                 display: inline; zoom:;
  20.             }
  21.             #extra {
  22.                 width: 1px;
  23.             }
  24.         </style>
  25.     <![endif]-->

效果：

缺点：这种方式自适应高度，简单易懂，但是需要给元素的父元素设置一个高度，可以是一个固定值或者百分比，另外需要增加一个额外的标签，当做盒模型，如div#extra，并且需要设置高度为100%。另外IE6-7不支持display:inline-block，需要给他们另外写一个样式。关于这种方法的操作可以参考：《CSS，Vertical Centering》

7.多行内容居中

这个方法是针对多行内容居中，而且容器高度是可变的，方法很简单，就是给出上下一个样的padding值。

html代码：

  1. <div class="columns">
  2.     <div class="item">
  3.         <span>test1</span>
  4.         <span>test2</span>
  5.     </div>
  6. </div>

css代码：

  1.         .item {
  2.             padding-top: 30px;
  3.             padding-bottom: 30px;
  4.         }

效果：

缺点：这种方法支持所有浏览器，支持所有元素，简单易懂，结果清晰，但是使用这种方法不能给容器高度，如果高度固定则无法达到效果。

8.jquery实现

如果元素固定高度，实现垂直居中很方便，但是自适应高度就比较棘手，这次我们可以使用jquery方法实现。

html代码：

  1. <div class="container">
  2.     <p>Centered In the middle of the page with jQuery</p>
  3. </div>

css代码：

  1. .container {
  2.             background-color: #338BC7;
  3.             width: 270px;
  4.             height: 150px;
  5.         }

jquery代码：

  1. <script>
  2. $(document).ready(function () {
  3.     $(window).resize(function () {
  4.         $('.container').css({
  5.             position: 'absolute',
  6.             left: ($(window).width() - $('.container').outerWidth()) / 2,
  7.             top: ($(window).height() - $('.container').outerHeight()) / 2
  8.         })
  9.     })
  10. })
  11. </script>

缺点：这种方法解构简单，易懂，不需要固定元素大小，兼容各种浏览器。缺点是要调用jquery，如果不支持js将无法运行。

9.jquery插件

根据第8种方法，可以写一个实现元素水平垂直居中的小插件，jquery插件代码如下：

  1. (function ($) {
  2.     $.fn.vhAlign = function () {
  3.         return this.each(function (i) {
  4.             //获取元素的内容高度
  5.             var h = Math.ceil($(this).height());
  6.             //outerHeight=padding+border+height
  7.             var oh = Math.ceil($(this).outerHeight());
  8.             //取得margin-top值
  9.             var mt = Math.ceil(oh / 2);
  10.             //取得元素宽度
  11.             var w = Math.ceil($(this).width());
  12.             //outerWidth=padding+border+width
  13.             var ow = Math.ceil($(this).outerWidth());
  14.             //取得margin-left
  15.             var ml = Math.ceil(ow / 2);
  16.             //实现元素居中效果
  17.             $(this).css({
  18.                 "margin-top": "-" + mt + "px",
  19.                 "top": "50%",
  20.                 "margin-left": "-" + ml + "px",
  21.                 "left": "50%",
  22.                 "width": w,
  23.                 "height": h,
  24.                 "position": "absolute"
  25.             });
  26.         });
  27.     };
  28. })(jQuery);

html代码：

  1. <div class="wrap">
  2.     <p>test jquery</p>
  3. </div>

引入这个插件：

  1. <script type="text/javascript" src="vhAlign.js"></script>

调用这个插件：

  1. $(document).ready(function () {
  2.     $('.wrap').vhAlign();
  3. })

效果：

缺点：这里有一点需要注意，如果元素不是相对body居中，需要在父元素中进行相对定位。

css点滴1—八种方式实现元素垂直居中的更多相关文章

  1. css点滴3—5种方式实现圆环

    使用css实现圆环,最简单的方式就是使用嵌套标签,设置border-radius就可以实现,但是这个是最简单的方式,这篇文章我们介绍5种方式实现圆环. 1.两个标签嵌套 html代码: <div ...

  2. selenium（1）-详细解读元素定位的八种方式

    安装selenium和下载webdriver 安装selenium pip install selenium pip install selenium  -U  (判断是否有最新版本) 下载drive ...

  3. selenium第三课（selenium八种定位页面元素方法）

    selenium webdriver进行元素定位时,通过seleniumAPI官方介绍,获取页面元素的方式一共有以下八种方式,现按照常用→不常用的顺序分别介绍一下. 官方api地址:https://s ...

  4. 原生JavaScript支持6种方式获取元素

    一.原生JavaScript支持6种方式获取元素 document.getElementById('id'); document.getElementsByName('name'); document ...

  5. 原生js获得八种方式,事件操作

    08.17自我总结 关于js 一.原生js获得八种方式 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTa ...

  6. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

  7. HTML 引用Css样式的四种方式

    不才,只知道HTML引用CSS样式有四种方式,内部引用和外部引用各两种,因为老是忘记细节,记下了随时翻阅亦可方便如我般的初学者 内部引用方式1: 直接在标签内用 style 引用,如: <div ...

  8. 原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  9. python 中增加css样式的三种方式

    增加css样式的三种方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

随机推荐

  1. [android] android下junit测试框架配置

    我们的业务代码一般是放在一个新的包下面,这个业务类不能够通过右键run as java application,因为android项目只能运行在手机上的dalvak虚拟机里面 新建一个包,里面写测试类 ...

  2. Eclipse中SVN插件的安装和配置(在线安装)

    公司项目中用到了svn来管理项目,然后需要在Eclipse中进行配置.网上参考了很多资料,离线安装的方式装上了,但是导入项目后报错,可能是离线安装包的问题.然后又采用了Eclipse在线安装的方式,总 ...

  3. 【Tomcat】上线部署tomcat。常用命令

    ps -ef | grep tomcat-web [查询tomact进程]kill -9 pid [结束tomcat进程]/opt/tomcat-web/bin/startup.sh [启动tomca ...

  4. JS基础(二)事件监听练习之table鼠标悬停行变色

    JS监听事件简单学习: [object].addEvent("事件类型","处理函数","冒泡事件或捕获事件");   [object].r ...

  5. 12 Linux Which Command, Whatis Command, Whereis Command Examples

    This Linux tutorial will explain the three "W" commands. The three "W"s are what ...

  6. Flask 系列之 LoginManager

    说明 操作系统:Windows 10 Python 版本:3.7x 虚拟环境管理器:virtualenv 代码编辑器:VS Code 实验目标 通过使用 flask-login 进行会话管理的相关操作 ...

  7. 开源前端脚本错误监控及跟踪解决项目-BadJS 试用

    BadJS 是 一个web 前端脚本错误监控及跟踪项目.此项目为鹅厂 imweb(qq群:179045421) 团队的开源项目.此项目支持单机,集群,docker.存储支持mongodb等. 官网文档 ...

  8. LNMP环境下安装Redis，以及php的redis扩展

    1.下载 sudo wget http://download.redis.io/releases/redis-4.0.9.tar.gz 2.解压 sudo tar zvxf redis-4.0.9.t ...

  9. Android 实现倒计时操作

    new CountDownTimer(10000, 1000) { @Override public void onTick(long millisUntilFinished) { } @Overri ...

  10. K8S 容器的资源需求、资源限制

    容器的资源需求,资源限制 requests:需求,最低保障: limits:限制,硬限制: CPU: 1 颗逻辑 CPU 1=1000,millicores 500m=0.5CPU QoS: Gura ...