問題描述

最近在做一個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>