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;
}
7.参考文献
HTML与CSS布局技巧——垂直居中
http://lotabout.me/2016/CSS-vertical-center/
http://y.dobit.top/Detail/162.html
