前端居中的方法(居中，垂直居中，水平居中)

1.居中

①

在父元素中通过设置 

display：flex；align-item：center；justify-content：center

②

在父元素中设置

position：relative；width：200px；height：200px；

在子元素中设置:

position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;

 2.水平居中

①在没有浮动的情况下，将元素设置为inline-block，然后在其父元素上设置：text-align即可。（对于span、img、a等不用设置inline-block）。

②对父元素设置display：flex；justify-content：center。

3.垂直居中

①对父元素设置display：flex；align-item：center。