本文已参与掘金创作者训练营第三期「高产更文」赛道，详情查看：掘力计划｜创作者训练营第三期正在进行，「写」出个人影响力。
水平容易，垂直难啊！且学且珍惜 ~~
介绍常见的三种方法，学会这三种基本上也够用了，更多的居中方法可以自行百度谷歌。
目录：
- 绝对定位 + margin: auto 法
- 绝对定位 + margin 负间距法
- Flex 弹性布局法
先顺带记一下水平居中：
- 内联元素水平居中：在父元素上设置
text-align : center; - 块级元素水平居中：
margin : 0 auto;
正文
1. 绝对定位 + margin: auto 法
给父元素设置：
position: relative; /* 父元素相对定位 */
居中的元素设置：
position: absolute; /* 子元素绝对定位 */
margin: auto;
left: 0;
top: 0;
bottom: 0;
right: 0;
原理：定位都给 0 了，元素自己也不知道该去哪儿，只好待在中间不知所措......(瞎说的)
2. 绝对定位 + margin 负间距法
给父元素设置：
position: relative; /* 父元素相对定位 */
居中的元素设置：
width: 200px;
height: 200px;
position: absolute; /* 子元素绝对定位 */
left: 50%;
top: 50%;
margin-left: -100px; /* width 的一半 */
margin-top: -100px; /* height 的一半 */
3. Flex 弹性布局法
给父元素设置：
display: flex;
justify-content: center; /* 显示在主轴的中间 */
align-items: center; /* 子项在侧轴中间位置 */
