标签高度设置为百分比%时，文字垂直居中显示

 

先看下要实现的效果：绿色部分高度是父元素的50%，然后我需要设置文字垂直居中。

 

html代码：

<div class="father">
    <div class="child">这是垂直居中显示的文字 </div> 
</div>

css代码（起作用的是伪元素before中的样式）：

    .father{
        width:100%;
        height:80px;
        background: pink;
    }

    .child{
        width:100%;
        height:50%;
        color: #fff;
        background: green;
    }
    .child::before{
        display: inline-block;
        content: "";
        height: 100%;
        vertical-align: middle;
    }