共计 891 个字符，预计需要花费 3 分钟才能阅读完成。
居中之前
首先我们创建一对父子元素，并为其设置好颜色大小备用
水平垂直居中
我们需要实现的效果图如下：
方法一：absolute + 负 margin
父级元素使用相对定位，子元素使用绝对定位，调整其相对于父元素的位置。要求是需要我们知道子元素的宽高。
方法二：absolute + margin auto
先设置各个方向的距离都是 0，再将 margin 设为 auto
方法三：absolute + calc
这种方法的使用和方法一一样，只是这里使用计算属性表示出来，缺点也是需要知道子元素宽高：
缺点：IE9 以上才支持。
方法四：absolute + transform
这里使用 transform 属性对子元素进行偏移，好处是不需要知道子元素的宽高，直接用百分比表示即可：
缺点：IE9 以上才支持。
方法五：vertical-align
首先将子元素转为行内块元素，然后通过父级元素的 text-aline 属性将其水平居中，然后通过设置子元素的 vertical-align 属性将其垂直居中。
下面列举了 vertical-align 属性的值，该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐：
方法六：table-cell
我们知道，table 元素默认垂直居中，而通过 css 可以将元素转为 table 类型，代码如下：
vertical-align 一般作用在内联元素上，主要用于内联元素间在垂直方向上的对齐。不过，vertical-align 同样也可以作用于 table-cell 元素，目的是为了指定 table-cell 中的内容在垂直方向上相对于 table-cell 的对齐关系。
缺点：对于设置为 display: table-cell 的元素，对其设置 margin 无效。
方法七：flex
通过弹性布局，可以轻易的实现水平垂直居中，甚至都不需要操作子元素：
justify-content 属性定义了项目在主轴上的对齐方式。
align-items 属性定义项目在次轴上如何对齐。
对比小结
PC 端有兼容性要求，宽高固定，推荐 absolute + 负 margin
PC 端有兼容要求，宽高不固定，推荐 css-table
PC 端无兼容性要求，推荐 flex
移动端推荐使用 flex