块级元素水平垂直居中

1.使用flex

父级元素：

display:flex

align-item: center

jusitify-content: center

2.使用table中的vertical-align

父级元素：

display: table

height: 200px

width: 100%; 

子元素：

display: table-cell

vertical-align:center

text-align: center

3.使用绝对定位

父级元素：

position:relative

子元素：

position: absolute

left: 50%

top:50%

transform: translate(-50%, -50%)

 

我用的比较多的就这三种，还有一些变形，比如

父元素：

        position: relative;
        height: 100px;

子元素：

      width: 50%;

      margin: 0 auto;

      top: 50%;

      position: relative;

      transform: translateY(-50%);

反正随机应变把~~