在居中之前，我们首先创建一对父子元素，并为它们设置颜色和大小，以保留水平和垂直居中。我们需要实现的效果图如下：方法一：绝对+负边距父元素使用相对定位，子元素使用绝对定位来调整自己相对于父元素的位置。要求是我们需要知道子元素的宽高。方法二：absolute+marginauto先将各个方向的距离设置为0，再将margin设置为auto属性，缺点也是需要知道子元素的宽高：缺点：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属性定义了item在主轴上的对齐方式。align-items属性定义项目如何在次轴上对齐。对比总结PC有兼容性要求，宽高固定，推荐absolute+negativemargin。PC有兼容性要求，宽高不固定，推荐使用css-table。PC没有兼容性要求，移动端推荐flex。
