CSS实现水平垂直居中的方式有很多，对此总结了一下区别：
1.absolute+负margin： 比较常用的方法，缺点是要知道子元素的宽高。
父级：
position: relative;子级：
position: absolute;top: 50%;left: 50%;margin-left: - 宽度的一半; margin-top: - 宽度的一半;
2.absolute+margin auto: 缺点是要知道子元素的宽高。
父级：
position: relative;子级：
position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;
3.flex: 只需父级样式就可以。移动端可以使用，pc端要看自己业务的兼容性情况。
父级:
display: flex;justify-content: center;align-items: center;
4. absolute+transform: 这种方法兼容性依赖 translate2d 的兼容性。
父级:
position: relative;子级:
position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
5. absolute+calc: 依赖calc的兼容性，缺点是要知道子元素的宽高。
父级:
position: relative;子级:
position: absolute; top: calc( 50% - 宽度的一半 ); left: calc( 50% - 宽度的一半 );
6. lineheight: 利用行内元素居中属性，通过text-align做到水平方向居中，vertical-align做到垂直方向居中。
父级:
line-height: 父级的高度; text-align:center; font-size:0px;
子级:font-size: 16px; display: inline-block; vertical-align: middle;line-height: intial; text-align: left;
7. css-table: 兼容性好，利用css的table属性。
父级:
display: table-cell;text-align: center; vertical-align: middle;子级:
display: inline-block;
以下是不推荐，但能实现：
8. table: dom结构的代码太冗余，而且也不是table的正确用法。
父级:
text-align: center;子级:
display: inline-block;
9. grid: 网格布局，兼容性不如flex，不推荐使用。
父级:
display: grid;子级:
align-self: center; justify-self: center;
10. writing-mode: 可以改变文字的显示方向，可以变为垂直方向，但是用在div水平垂直居中上会代码太多，麻烦一点。实现起来和理解起来都有些复杂。不推荐。
嘤嘤嘤~~
大概就这么些，还是习惯用flex来实现。
