问题描述

最近在做一个Android/ target=_blank class=infotextkey>安卓平板的项目，开发模式是混合开发，即原生 App 中内嵌 H5 网页。文字垂直居中使用的是 height + line-height 组合，在 PC 上效果一直是好的，我手上开发用的安卓平板上效果也是好的。昨天领导拿过来一个华为平板对我说：“文字怎么不是垂直居中”。我一看，还真是。

“在我电脑上是好的啊！”

初始方案：line-height 实现文字垂直居中

<span class="content">Hello World</span>
<style>
    .content {
        display: inline-block;
        width: 120px;
        font-size: 14px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        background-color: cornflowerblue;
    }
</style>

这种方案在 PC 上显示都是正常的，在安卓平板上文字会偏移。

查找资料后，验证后发现下面这种解决方案有效。

修改后方案：flex 实现文字垂直居中

<span class="content">Hello World</span>
<style>
    .content {
        display: flex; /* flex 布局 */
        width: 120px;
        height: 36px;
        align-items: center; /* 文字垂直居中 */
        text-align: center;
        justify-content: center;  /* 一行文字的时候 text-align 无效 */
        background-color: cornflowerblue;
    }
</style>