文本内容不管有多少始终能垂直居中

168 阅读1分钟
<div  class = "parent">
    <div class = "left"></div>
        <div class = "right">
           <div class = "son">
                <div class="content">一行我要垂直居中,两行三行我也要垂直居中</div>
           </div>
      </div>
</div>
right{
    width:100%;
    height:2rem;
}
.son{
    width:100%;
    height:2rem;
    display: table;
}
.content{
    width:100%;
    height:2rem;
    display: table-cell;
    vertical-align: middle;
    word-wrap: break-word;
    word-break: break-all;
}