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

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

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

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

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

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

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

RapmvY

若是本姑娘就不想使用 padding 不方便使用 padding 时，能够经过给元素设置 line-height，使其等于父容器的高度，从而实现竖直居中。==注意，此时记得要考虑父容器的 padding 和 border 带来的高度变化。==

bpqPwN

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

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

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

MypMBE

块级元素竖直居中

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

1. 块级元素高度已知

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

/* 已知元素高度为 100px (也能够是百分比，如 80%)*/
height: 100px;

/* 先使用绝对定位，将元素的上边界置于竖直的中间*/
position: absolute;
top: 50%;

/* 再使用margin-top，将元素向上移动自身高度的一半*/
margin-top: -50px;

KzWjbq

笔者表示相似这段代码的使用频率简直不要过高~ 因而在使用 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 使元素向上移动自身高度的一半，进而实现竖直居中。

/* 先将元素的上边界置于竖直的中间*/
position: relative;
top: 50%;

/* 再使用 translateY，将元素向上移动自身高度的一半*/
transform: translateY(-50%);

bpqPyB

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

另外，之后再遇到别的竖直居中的实现方法，也会更新到这里。