css 实现垂直居中的 N 种场景及 N 种方法

刚开始工作的时候，css 里的竖直居中一直是个老大难问题。每次用到的时候都去网上搜，搜，搜，半天才搜到合适的解决方法。然后下次遇到，呃，又忘了~

后来仔细回忆了一下，其实CSS实现竖直居中是有几种不同的应用场景的，需要分别使用不同的解决方法。这也是为啥每次都觉得，诶上次那个解决方法好像不行呢？（原来并不是我智商的问题）好了废话不多说，记录下遇到的不同场景及解决方法，希望能对自己或者别人有所帮助。

inline 或者 inline-* 的元素竖直居中

可以借助 padding, line-height, vertical-align 等属性。有如下两种具体情景：

1. 单行竖直居中，如单行文本或者链接

这种情况，通过给元素上下添加相同大小的 padding 值即可实现竖直居中。

1 2 3

< div class = "container" >      < p >单行文本竖直居中，添加相同的 padding-top & padding-bottom 值</ p > </ div >

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

body {      margin : 0 ; }   .container {      background-color : #fe435e ;      padding : 10px ; }   p {      margin : 0 ;      color : #fff ;      /*  相同的上下 padding 值使单行文字居中 */      padding-top : 100px ;      padding-bottom : 100px ; }

如果就不想使用 padding 不方便使用 padding 时，可以通过给元素设置 line-height，使其等于父容器的高度，从而实现竖直居中。注意，此时记得要考虑父容器的 padding 和 border 带来的高度变化。

2. 多行竖直居中，如多行文本

和单行文本一样，给元素上下添加相同大小的 padding 值，还是好用滴~

1 2 3 4 5 6

< div class = "container" >      < p >          多行文本竖直居中，给元素上下添加相同的 padding 值。< br />          这只是另外一段无关紧要的，用来测试的废话。      </ p > </ div >

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

body {      margin : 0 ; }   .container {      background-color : #fe435e ;      padding-left : 10px ;      padding-right : 10px ; }   p {      width : 160px ;      margin : 0 auto ;      color : #fff ;      line-height : 1.5 ;      /*  给元素上下添加相同大小的padding值 */      padding-top : 40px ;      padding-bottom : 40px ; }

另外一种方法，是借助 table 的属性：将父容器设置成 table，需要竖直居中的元素设置为 table-cell，然后就可以使用 vertical-align 属性来居中了。

1 2 3 4 5

< div class = "container" >      < p >          多行文本竖直居中，将父容器设置为 table，需要竖直居中的元素设置为 table-cell， 然后使用 vertical-align 属性。      </ p > </ div >

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

body {      margin : 0 ; }   .container {      background-color : #fe435e ;      padding-left : 20px ;      padding-right : 20px ;      height : 400px ;      /* 父容器设置成 table*/      display : table; }   p {      width : 160px ;      margin : 0 auto ;      color : #fff ;      line-height : 1.5 ;      /* 需要竖直居中的元素设置为 table-cell*/      display : table-cell ;      vertical-align : middle ; }

块级元素竖直居中

通常借助 绝对定位 和 translate 等手段，在已知或者未知块级元素高度时，分别使用不同的方法。

1. 块级元素高度已知

此时可以使用绝对定位的方法，并借助 margin 可以为负值的特性，实现绝对定位居中：

/* 已知元素高度为 100px (也可以是百分比，如 80%)*/
height: 100px;
/* 先使用绝对定位，将元素的上边界置于竖直的中间*/
position: absolute;  
top: 50%;
/* 再使用margin-top，将元素向上移动自身高度的一半*/
margin-top: -50px;

 

1 2 3 4 5 6

< div class = "container" >      < div class = "v-c" >          < p >使用绝对定位使元素竖直居中。</ p >      </ div >      </ p > </ div >

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

body {      margin : 0 ; }   .container {      background-color : #fe435e ;      padding : 0px 20px ;;      height : 400px ;      /* 父容器需要设置position, 使需要竖直居中的元素相对父容器进行绝对定位*/      position : relative ; }   .v-c {      width : 400px ;      padding : 0 20px ;      padding-right : 20px ;      background-color : #ade4eb ;      height : 200px ;      /* 使用绝对定位使元素竖直居中*/      position : absolute ;      top : 50% ;      margin-top : -100px ;      /* 需要考虑 padding 和 border, 如果没有设置 box-sizing: border-box; 的话*/       }   p {      margin : 0 auto ;      color : #fff ;      line-height : 200px ; }

笔者表示类似这段代码的使用频率简直不要太高~ 于是在使用 scss 的前提下，自己封装了一个 mixin，专门用来实现这种定位方式。

// 定义绝对定位实现水平、垂直居中
@mixin abs_h_center($width) {
  position: absolute;
  width: $width;
  left: 50%;
  margin-left: -($width/2);
}
@mixin abs_v_center($height) {
  position: absolute;
  height: $height;
  top: 50%;
  margin-top: -($height/2);
}
// 然后使用的时候直接引用就可以了，这样可以避免在改动元素宽或高时，还需要同时去改 margin-left 或者 margin-top 的值
.content {
  @include abs_v_center(200px);
}

2. 块级元素高度不固定

与上面提到的使用绝对定位居中的方法原理类似，只不过在元素高度不确定的情况下，借助 translateY 使元素向上移动自身高度的一半，进而实现竖直居中。更多精彩内容关注微信公众号：全栈开发者中心（admin10000_com）

/* 先将元素的上边界置于竖直的中间*/
position: relative;  
top: 50%;
/* 再使用 translateY，将元素向上移动自身高度的一半*/
transform: translateY(-50%);

 

1 2 3 4 5 6

< div class = "container" >      < div class = "v-c" >          < p >使用 translateY 使元素竖直居中。</ p >      </ div >      </ p > </ div >

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

body {      margin : 0 ; }   .container {      background-color : #fe435e ;      padding : 0px 20px ;;      height : 400px ; }   .v-c {      width : 400px ;      padding : 0 20px ;      padding-right : 20px ;      background-color : #ade4eb ;      /* 使用 translateY，使元素竖直居中*/      position : relative ;      top : 50% ;      transform: translateY( -50% ); }   p {      margin : 0 auto ;      color : #fff ;      line-height : 200px ; }

目前想到的就这些，应该足够覆盖大部分的使用情况了~ 以上这些实现方法，当然也可以是混合使用的，具体如何，就看应用场景啦。