前端经典css面试题：如何让一个div垂直水平居中

<div class="father">   <div class="child"></div>    </div>

方法1：flex布局

.father{

    display: flex;

    justify-content: center;

    align-items: center;

}

方法2：定位

.father{

position: relative;

}

/*1.元素宽高未知*/

.child{

    position: absolute;

    top: 50%;

    left: 50%;

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

}

/*2.元素宽高已知*/

.child{

    position: absolute;

    margin-left: -50px;

    margin-top: -25px;

    top: 50%;    

    left: 50%; 

    width: 100px;

    height: 50px;

}

/*或*/

.child{     

    position: absolute;

    margin: auto;

    top: 0;

    right: 0;

    bottom: 0;

    left:0;

    width: 100px;

    height: 50px;

}