CSS实现字体垂直竖排居中显示

字体垂直竖排居中显示，这里有两种方法，下面我就教大家实现。

HTML：

<ul>
    <li>
        <span>首页</span>
        <span>HOME</span>
    </li>
    <li>
        <span>关于我们</span>
        <span>ABOUT</span>
    </li>
    <li>
        <span>案例</span>
        <span>CASE</span>
    </li>
    <li>
        <span>资讯</span>
        <span>INFORMATION</span>
    </li>
    <li>
        <span>联系我们</span>
        <span>CONTACT US</span>
    </li>
</ul>

CSS，方法一：

ul{
    /*去点*/
    list-style: none;
    /*去除偏移*/
    padding: 0px;
    margin: 0px;
}
li{
    border: 1px solid;
    float: left;
    height: 130px;
    
    /*文字居中*/
    text-align: center;
    display: flex;
}
li span{    
    /*文字竖排显示*/
    writing-mode: vertical-lr;/*从左向右 从右向左是 writing-mode: vertical-rl;*/
    writing-mode: tb-lr;/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
}

CSS，方法二：

li{
    border: 1px solid;
    float: left;
    height: 130px;
    
    /*文字居中*/
    text-align: center;
    /*display: flex;*/
}
li span{
    /*文字居中*/
    display: inline-block;
    height: 100%;
    /*文字居中*/
    
    /*文字竖排*/
    writing-mode: vertical-lr;/*从左向右 从右向左是 writing-mode: vertical-rl;*/
    writing-mode: tb-lr;/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
}