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

 

先看下要实现的效果:绿色部分高度是父元素的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;
    }

 

posted @ 2020-08-05 21:56  木子的紫微星  阅读(486)  评论(0编辑  收藏  举报