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%)