元素居中的方法

方法1

1、在父元素上，添加 text-align：center；
2、在目标元素上，添加 display：inline-block；（倘若目标元素本就是行内块元素，则不用添加此句） vertical-align：middle；
3、在与目标元素同级的后面添加一个元素，如。则在css样式上添加 display：inline-block； width：0；height：100%；vertical-align：middle；
注：vertical 对块级元素不起作用。

方法2

1、在父元素上，添加 position：relative；
2、在目标元素上，添加 position：absolute； left：0；right：0；top：0；bottom：0；margin：auto；

方法3

1、在父元素上，添加 position：relative；
2、在目标元素上，添加 position：absolute；left：50%；top：50%；margin-left：-（width/2）px; margin-top：-（height/2）px;

方法4

在父元素上，添加 display：flex；justify-content：center；align-items：center；