CSS居中方法总结（伪元素，弹性盒，定位法，动画法）

一、使用定位加margin的方式：

将子元素开启定位，然后top,left设置为50%，然后margin-top和margin-left设置为负数，大小分别为该元素高和宽的一般，当然，也可以直接设置top为（50%父元素-子元素height/2），left为（50%父元素-子元素width/2）

二、使用弹性盒

为父元素开启弹性盒，然后设置justify-content和align-item为center；

三、用table和table-cell

将父元素设置为display：table
子元素为table-cell，
然后用vertical-align：middle，text-align：center；

四、伪元素法

为父元素::after或者::before设置为
content:"";
display:inline-block;
vertical-align:middle;
height:100%;
为子元素设置为
display:inline-block;
vertical-align:middle;
伪元素可以用一个空的span代替，但是没必要，节省一个元素。

五、使用动画：

即子元素开启绝对定位，然后top:50%,left:50%,transform:translate(-50%,-50%)