利用flex实现元素水平垂直居中

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

*{
    margin: 0;
    padding: 0
}
.father{
    width: 400px;
    height: 400px;
    border: 1px dashed black;
    display: flex;/*父元素设置flex属性*/
    justify-content: center;/*水平主轴居中*/
    align-items: center;/*垂直交叉轴居中*/
}
.son{
    width: 100px;
    height: 50px;
    background: pink;
}