1. 背景介绍

居中是前端排版的一个重要话题，今天我们就来梳理一下垂直居中的方法。

2. 知识剖析

布局的解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性 + flexbox，咱们就从这几点入手。

3. 常见问题

垂直居中的方式？

4. 解决方案

HTML 如下：

<div class="out">
<div class="in">nihaoa</div>
</div>

默认的 CSS 如下：

.out {
width: 300px;
height: 300px;
background-color: red;
}
.in {
background-color: yellow;
}

①子元素 line-height: 100%，代码少，兼容性好，但子元素背景色覆盖了父元素：

.in {
line-height: 100%;
}

②子元素 absolute+auto，兼容性好，但需要设置子元素的高度：

.out {
position: relative;
}
.in {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
height: 20px;
}

③ 子元素 top+margin-top，兼容性好，但需要设置子元素的高度 ：

.out {
position: relative;
}
.in {
position: absolute;
top: 50%;
height: 20px;
margin-top: -10px;
}

④ 子元素 absolute+ translateY，无需设置子元素的高度，但兼容性不好：

.out {
position: relative;
}
.in {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

⑤ 子元素 top: calc（），只需设置子元素，但需要知道子元素的高度，且兼容性不好：

.in {
position: relative;
height: 20px;
top: calc(50% - 10px);
}

⑥ 父元素 display: flex; 设置很简单，但兼容性不好

.out {
display: flex;
align-items: center;
}

⑦ 父元素 display: flex;+ 子元素 margin：auto；设置简单，比 6 稍微复杂，但同样兼容性不好:

.out {
display: flex;
}
.in {
margin: auto 0;
}

⑧ table 布局，兼容性好，但子元素背景色会覆盖父元素，且性能不好:

.out {
display: table;
}
.in {
display: table-cell;
vertical-align: middle;
}

⑨ 兼容性好，但需要知道父元素高度，且比较复杂:

.out:after {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.in {
display: inline;
vertical-align: middle;
}

5. 编码实战

如上

6. 扩展思考

如何水平居中？

方法如下：
①子元素 margin: auto;

.in {
margin: auto;
width: 4em;
}

②对于行内元素 text-align: center;

.in {
text-align: center;
}

③和②相似

.out {
text-align: center;
}
.in {
display: inline-block;
}

④绝对定位 + left+ margin-left

.out {
position: relative;
}
.in {
position: absolute;
left: 50%;
width: 5em;
margin-left: -2.5em;
}

⑤绝对定位 + left+ translatex

.out {
position: relative;
}
.in {
position: absolute;
left: 50%;
transform: translatex(-50%);
}

⑥子元素 display: table;

.in {
display: table;
margin: auto;
}

⑦父元素 display: flex;+ 子元素 margin：auto；

.out {
display: flex;
}
.in {
margin: 0 auto;
height: 20px;
}

⑧父元素 display: flex;

.out {
display: flex;
justify-content: center;
}
.in {
height: 20px;
}