垂直水平居中几种实现风格

1.flex布局实现

.parent{
        display: flex;
        justify-content: center;
        align-items: center;
    }

2.flex margin

.parent{
        display: flex;
    }
    .child{
        margin:  auto;
    }

3.使用子绝父相，trandfrom

.parent{
        position: relative;
    }
    .child{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%)
    }

4.使用子绝父相，margin

  .parent{
        position: relative;
    }
    .child{
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -200px;
        margin-top: -200px;
        
    }

5.子绝父相，margin

 .parent{
       position: relative;
    }
    .child{
        position: absolute;
        top: 0px;
        right: 0px;
        left: 0px;
        bottom: 0px;
        margin: auto ;
    }

6.grid

 div.parent {
        display: grid;
        }
    div.child {
        justify-self: center;
        align-self: center;
    }

7.table(不推荐，有页面性能问题，回流)

div.parent {
display: table;
}
div.child {
display: table-cell
vertical-align: middle;
text-align: center;
}