Android 瀏覽器文本垂直居中問題

原文：http://imweb.io/topic/5848d0fc9be501ba17b10a94

問題描述

在開發中，我們常使用 line-height 屬性來實現文本的垂直居中，但是在安卓瀏覽器渲染中有一個常見的問題，就是對於小於12px的字體使用 line-height 屬性進行垂直居中的時候，渲染出來的效果並不是文字垂直居中，而是會偏上一些。舉兩個代碼示例如下：

1. 大於12px

html

<span>testtesttest</span>

css

span {
    display: inline-block;
    height: 16px;
    background-color: gray;
    line-height: 16px;
    font-size: 12px;
}

<!-- more -->

2. 小於12px html

<span>testtesttest</span>

css

span {
    display: inline-block;
    height: 16px;
    background-color: gray;
    line-height: 16px;
    font-size: 10px;
}

可以看到當 font-size 小於 12px 的時候，利用 line-height 屬性進行垂直居中佈局明顯是偏上的，這裏爲了避免由於 font-size 是奇數帶來的偏差，特意把 font-size 都設置成了偶數

問題原因

起初對這個問題有過兩種推測，一是認爲是字體的問題，或者是瀏覽器渲染的問題。但後面發現即使換了字體只要 font-size 還是小於 12px 一樣會出現這個問題。

解決辦法

看起來問題的根源在於字體大小小於 12px，所以解決問題可以從這個方向入手，要麼改變字體大小，要麼換個方式讓它垂直居中。

1. 改變字體大小 最直接的方法就是改變字體大小讓它大於 12px 能夠正常居中，如果頁面對字體大小要求比較嚴格的話，可以先將原來包括 font-size 在內的屬性放大兩倍，再用 scale 縮小一倍，這樣測試之後也是可行的：

<span class="content">testtesttesttesttest</span>

.content {
    display: inline-block;
    height: 40px;
    background-color: gray;
    line-height: 40px;
    font-size: 20px;
    transform: scale(0.5);
    transform-origin: 0% 0%;
}

但不知道爲什麼，用這種方法之後我總是感覺文字沒有絕對地居中，好像是有一點細微的偏下，

<div class="container">
    <span class="content">testtesttesttesttest</span>
</div>

.container {
    display: table;
}
.content {
    background-color: gray;
    font-size: 10px;
    display: table-cell;
    vertical-align: middle;
}

利用 table 佈局能夠比較好地實現文本垂直居中，缺點是要在外面多包一層容器。

總結

在查閱了很多資料之後，雖然能夠解決這個問題，但導致問題的具體原因還是不夠明顯，只知道是安卓端瀏覽器的渲染問題，再往深一點的原因就有點鞭長莫及了，若有同行研究過這個問題，還望不吝賜教哈~