多行文字垂直居中显示

单行文字居中显示：line-height

html:

<ul>
                        <li><span>转正申请</span></li>
                        <li><span>离职申请</span></li>
                        <li><span>调岗申请</span></li>
                        <li><span>费用报销</span></li>
</ul>

css:

ul li{
line-height: 50px;
}

多行文字居中显示：

image.png

html:

 <ul>
                        <li><span>转正转正申请转正申请转正</span></li>
                        <li><span>离职转正申请转正申请转正申请申请</span></li>
                        <li><span>调岗转正申请转正申请转正申请申请</span></li>
                        <li><span>费用转正申请转正申请转正申请转正申请</span></li>
 </ul>

css:

ul li {
        width: 158px;
        float: left;
        background: #FFFFFF;
        border: 1px solid #DDDEE1;
        border-radius: 2px;
        margin-right: 10px;
        color: #004098;
        text-align: center;
        font-size: 14px;
        line-height: 78px; // 父元素设置行高
        padding: 0 10px;
    }
ul li span{
        display: inline-block;
        vertical-align: middle; //子元素设置vertical-align：middle
        line-height: 22px; //字元素设置行高
    }

给父元素设置line-height，给内层元素也设置一个line-height，并且设置vertical-align：middle;display:inline-block;。