让元素在父元素中呈现出水平垂直居中的形态，分为以下几种情况：
单行的文本、inline 或者 inline-block 元素
- 水平：text-align
- 垂直：
- padding
- line-height
固定宽高的块级盒子
- absolute + 负margin
- absolute + margin auto
- absolute + calc
不固定宽高的块级盒子
- absolute + transform
- lineheight
- writing-mode
- css-table
- flex
- grid
单行的文本、inline 或 inline-block 元素
水平居中
此类元素需要水平居中，则父级元素必须是块级元素(block level)，且父级元素上需要这样设置样式：
.parent {
text-align: center;
}
垂直居中
方法一：通过设置上下内间距一致达到垂直居中的效果：
.single-line {
padding-top: 10px;
padding-bottom: 10px;
}
方法二：通过设置 height 和 line-height 一致达到垂直居中：
.single-line {
height: 100px;
line-height: 100px;
}
固定宽高的块级盒子
方法一：absolute + 负 margin
方法二：absolute + margin auto
方法三：absolute + calc
不固定宽高的块级盒子
方法一：absolute + transform
方法二：line-height + vertical-align
方法三：writing-mode
方法四：table-cell
方法五：flex
方法六：grid
优缺点对比总结：
- PC端有兼容性要求，宽高固定，推荐absolute + 负margin
- PC端有兼容要求，宽高不固定，推荐css-table
- PC端无兼容性要求，推荐flex
- 移动端推荐使用flex
参考文章：
