最经常使用的css垂直居中方法

引言

  css垂直居中一直以来都是一个被你们说烂了的话题,翻来覆去的炒。不过说实话,正是由于css没有提供标准的垂直居中方法(不过在css3中已经有了相关规范),因此你们才会对它进行专门的研究。这研究来研究去,垂直居中的方法比水平居中都要多了。但又说回来,各类方法人云亦云,不一样的方法对于不一样层次的人理解起来又有不一样,用处也不一样。本文结合技术实现的复杂度、理解性的难易度、以及大多数人的接触顺序对经常使用的垂直居中方法进行分等级的系统讲解,但愿能对读者的工做和学习有所帮助。css

  OK,闲话扯了一堆,下面开始正文,先来一个你们最早接触到的。html

Level 1:绝对定位

  兼容性:css3

Firefox  Chrome Internet Explorer Opera Safari
(Yes) (Yes) IE8+ (Yes) (Yes)

 

1 <div class="vertical">
2      <div class="content"></div>
3 </div>
 1 .vertical {
 2     position: relative;
 3     width: 200px;
 4     height: 200px;
 5     margin: 0 auto;
 6     margin-top: 10px;
 7     border: 1px solid blue;
 8 }
 9 .content {
10     position: absolute;
11     width: 50px;
12     height: 50px;
13     background-color: red;
14     margin: auto;
15     left: 0;
16    right: 0;
17    top: 0;
18    bottom: 0;
19 }

  技术讲解:子元素宽高固定,设置 position: absolute,top 和 bottom 设置为0以后能够实现自适应垂直居中,同理也能够实现水平居中。垂直居中是大多数人最先开始接触到的垂直居中方法,实现简单,理解起来也不复杂,兼容性强,在实际中的运用也比较普遍。可是由于元素使用绝对定位会脱离文档流,因此这种方法经常用来对对话框和弹窗进行定位,也经常用于对界面基础结构进行布局。(以下)浏览器

  技术要点:绝对定位的定位参照物为第一个具备非 static 定位的祖先元素,因此父元素的 position 属性必须是非 static 的属性才能实现垂直居中,且子元素需设置 margin: auto。wordpress

  优势:实现简单,易理解,兼容性强,适用于多种场景,自适应性强。
布局

  缺点:只能对 block 元素进行垂直居中,切会脱离文档流,因此使用的时候须要注意。学习

   

Level 2:行高

  兼容性:测试

Chrome Firefox (Gecko) Internet Explorer Opera Safari
(Yes) (Yes) IE8+ (Yes) (Yes)
1 <div class="vertical">
2     <div class="content">content</div>
3 </div> 
 1 .vertical {
 2     position: relative;
 3     width: 200px;
 4     height: 200px;
 5     line-height: 200px;
 6     margin: 0 auto;
 7     margin-top: 10px;
 8     border: 1px solid blue;
 9     font-size: 0;
10 }
11 .content {
12     display: inline-block;
13     width: 50px;
14     height: 50px;
15     background-color: red;
16     vertical-align: middle;
17     font-size: 12px;
18     line-height: 1.2em;
19 }

  或者flex

1 <div class="vertical">
2     content
3 </div> 
1 .vertical {
2     position: relative;
3     width: 200px;
4     height: 200px;
5     line-height: 200px;
6     margin: 0 auto;
7     margin-top: 10px;
8     border: 1px solid blue;
9 }

  技术讲解:经过行高来实现垂直居中也是一个经常使用的方式,把行高 line-height 和 高度 height 设置为相同值,可实现子元素垂直居中。子元素只能是 inline 类型或者 inline-block 类型,须要注意的是,经过这种方式实现的垂直居中,一行文字的行高也就是整个父元素的高度(包括 inline 元素如 <span> ,inline-block 元素如 <img>),所以文本内容只能显示一行,其他的则会溢出。若是子元素是 inline-block 类型,那么须要设置 vertical-align: middle,不过这不是绝对的垂直居中。相信你们也看见前面画横线的部分,出现了奇怪的 font-size:0,这是由于 inline-block 类型对齐的只是文本的基线(baseline),而不是文本的中线(关于基线和中线,来源于 inline-box 的概念,详情可参见张鑫旭的文章:css行高line-height的一些深刻理解及应用)。因此须要设置 font-size:0 ,来使 inline-box 模型的高度为0,这样其中线和基线就在一条线上了。同时还须要注意的是,因为line-height 和 font-size 的继承性,因此在子元素上须要对其进行修复。使用行高进行垂直居中是很是广泛的应用,因为其能够控制子元素垂直居中,因此经常用来制做导航栏的样式。(以下)this

  

  技术要点:将 line-height 和 height 设置为相同值实现垂直居中。inline 类型的子元素只能显示一行文字,inline-block 类型的子元素要注意其对齐的是基线,所以要经过设置 font-size:0 来实现绝对垂直居中。

  优势:兼容性强,实现简单,可对 inline-block 以及 inline 类型的元素垂直居中。

  缺点:须要对其父元素进行彻底的控制,且 inline 类型子元素文本只能显示一行,灵活性不强。

 

Level 3:表格单元(table-cell)

   兼容性:

Chrome Firefox (Gecko) Internet Explorer Opera Safari
(Yes) (Yes) IE8+ (Yes) (Yes)
1 <div class="vertical">
2     <div class="content"></div>
3     this is test this is test this is test this is test 
4 </div> 

1
.vertical { 2 display: table-cell; 3 width: 200px; 4 height: 200px; 5 border: 1px solid blue; 6 vertical-align: middle; 7 text-align: center; 8 } 9 .content { 10 display: block; 11 width: 50px; 12 height: 50px; 13 margin: 0 auto; 14 background-color: red; 15 }

  技术讲解:父元素设置 display:table-cell,并将垂直对齐方式设置为 vertical-align:middle 可实现子元素垂直居中。使用 table-cell 进行垂直居中也是一个较经常使用的方法,该方法比用 line-height 更灵活,可是其父元素由于具备表格的属性稍微较难控制,所以最好的是在外面再加一层 wraper 。这种方法实现垂直居中,子元素为 inline、inline-block、block都可,且没有使用行高那样只能显示一行文本的限制,而且具备自适应性。(相关实例目前我尚未发现o( ̄▽ ̄)d )

  技术要点:设置父元素 displate:table-cell 以及 vertical-align:middle 实现垂直居中,必要时建议加上一个 wraper。

  优势:子元素能够为多种类型的元素,block、inline-block、inline 类型都可,使用范围广,且具备自适应性。

  缺点:父元素具备表格属性,由于较难控制,建议使用时加上一个 wraper。

 

Level 4: writing-mode

  兼容性:

Chrome Firefox  Internet Explorer Opera Safari
8+ 41+ IE8+(partial) ? ?
1 <div class="vertical">
2     <div class="content">content</div>
3 </div> 
 1 .vertical {
 2     display: block;
 3     width: 200px;
 4     height: 200px;
 5     border: 1px solid blue;
 6     writing-mode: vertical-lr;
 7     writing-mode: tb-lr;/* 兼容IE */
 8 }
 9 .content {
10     display: block;
11     width: 100px;
12     height: 100px;
13     margin: auto 0;
14     background-image: url("img.jpg");
15     writing-mode: horizontal-tb;
16 }

  Chrome & FireFox

  IE

  技术讲解:经过 writing-mode 来实现垂直居中相信大多数人都没有据说过,不过该方法也几乎没有见过在实际中的运用,除了改变文本方向以外。相信咱们全部人在最开始学习到块元素水平居中 margin:0 auto 的时候,都曾幻想加一个 auto 来实现垂直居中,but it doesn't work。可是如今咱们要回来了,咱们要使用 margin 来实现垂直居中,writing-mode 的做用是改变文档流的方向,由于浏览器的文档流方向默认是从上到下,从左向右,咱们把先后顺序换一下,换成从左向右,从上到下,这样一来原来的 width 变成了 height,原来的 height 变成了width,从而使盒模型转换了90度。也就是说一切的排版规则不变,只是本来站立的人如今趟下了,以前的一切特性也会跟着一块儿躺下,好比外边距 margin 等等。若是说只是用于实现垂直居中的话,子元素要修复文档流方向,由于 writing-mode 具备继承性。不过在IE上就不那么乐观了,IE有其自身实现 writing-mode 的值,在这里就不一一列举了。在IE当中若是修复子元素的话,子元素自己也会被修复,也就是说子元素自己的排版会按照修复属性的样式,这里你们能够自行测试。这种方法还有一个须要注意的是,改变文档流的方向并不会改变其背景图片的排版方向。此方法实际运用意义不大,而且兼容性很差(只是单纯的针对IE而已。。。),拿它来炫技是个不错的选择。

  技术要点:设置父元素 writing-mode: vertical-lr 改变文档流方向,子元素设置 margin: auto 0 实现垂直居中,若有必要给子元素加上 writing-mode: horizontal-tb 修复文档流。

  优势:自适应性强,与绝对定位实现效果相似,且不会脱离文档流。

  缺点:实用性不大,兼容性差,只能对 block 类型元素实现垂直居中。

 

Level 5:flex布局

  兼容性:

Chrome Firefox  Internet Explorer Opera Safari
21+ 28+ 10+(partial) 12.1+ 6.1+
1 <div class="vertical">
2     <div class="content"></div>
3     <div class="content2"></div>
4 </div> 
 1 .vertical {
 2     display: flex;
 3     flex-direction: row;
 4     width: 200px;
 5     height: 200px;
 6     border: 1px solid blue;
 7     justify-content: center;
 8     align-items: center;
 9 }
10 .content {
11     width: 50px;
12     height: 50px;
13     background-color: red;
14 }
15 .content2 {
16     width: 50px;
17     height: 80px;
18     background-color: green;
19 }

  技术讲解:随着CSS3的到来,咱们终于有了官方标准的垂直居中方法,flex布局是w3c针对复杂的文档模式新提出来的一种布局方案,目前浏览器兼容性还算乐观,随着IE市场的衰减,flex布局将会成为将来布局的主流。这种布局方法灵活多变,可适应不一样的文档流和各类场合。其中使其垂直居中生效的方法是 justify-contentalign-items ,不过要注意主轴 flex-direction 的方向,默认值是 row(及水平的文档流),注意这里和传统的默认从上到下的文档流相反。justify-content 设置主轴上的对齐方式,也就是相对于主轴的水平对齐方式,aligh-items 设置交叉轴的对齐方式,也就是相对于主轴的垂直对齐方式。关于具体的 flex 布局教程,能够参加大漠的《图解CSS3:核心技术与案例实战》,或者阮一峰的文章Flex 布局教程:语法篇。虽然说目前为止 Flex 布局对于IE的兼容性不完整,可是在移动端 Flex 但是已经大有做为了,而且从此随着IE用户逐渐转移到edge上,flex布局将会代替许多传统的方法。

  技术要点:父容器设置 display:flex 使用 flex 布局,经过 flex-direction 设置主轴方向再用 justify-content 和 aligh-items 设置水平或垂直方向的对齐方式,注意主轴方向与对齐方向的关系。

  优势:适用范围广,自适应性强,灵活性高,可对任意类型子元素实现垂直居中。

  缺点:目前兼容不完善(只是目前为止)。

总结

  垂直居中的方法五花八门,细数起来确定不仅这5种,可是归根到底其实现的思想和技术核心倒是同样的。以上5种方法是对不一样垂直居中方法的一个总结,排名顺序依照技术实现的难易度、可理解性的复杂度、以及大多数人的接触顺序的综合分析。目前浏览器的兼容性测试还不够彻底,若有错误或者补充,欢迎在评论中指出。

  以上 DEMO 运行平台: Windows 10 & FireFox 54

  在线测试平台:jsfiddle

参考文献:

  大漠 —— 《图解CSS3:核心技术与案例实战》

  张鑫旭 —— 《改变CSS世界纵横规则的writing-mode属性》

  张鑫旭 —— 《css行高line-height的一些深刻理解及应用》

  阮一峰 —— 《Flex 布局教程:语法篇》

相关文章
相关标签/搜索