html 子元素相对父元素垂直居中

<div class="father">
    <div class="son">
        子元素
    </div>
</div>

子元素相对父元素垂直居中，在不清楚父元素高度的情况下，可使用如下方式：

.father{
    position:relative;
}

.son{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

 父元素使用相对布局，子元素使用绝对布局，同时设置子元素距离父元素顶部50%，子元素设置transform: translateY(-50%);

子元素自身偏移50%，来实现垂直居中