小於12px的文本居中問題

前幾天在作項目的過程當中，關於字體小於12px時，很難作到徹底居中顯示，表示有點抓狂，各類百度找到一個貌似還不錯的方法，總結出來分享給你和我。

在PC端的Chrome瀏覽器中，小於12像素的字體仍然以12像素顯示，即便是設置了-webkit-text-size-adjust: none;也好像沒什麼做用。通過實驗，發現以下兩種方式比較有用，各位看官可聽我細細道來。

---

方式一

使用transform:scale()
假如設計同窗給你的字體大小是10px,你設置了font-size:10px，此時在PC中測試並不會看到效果；一種有用的方法是：

font-size: 12px //PC中Chrome的最小字體
transform: scale(0.833333333);
height: 12px; //設計給的高度是10px
line-height: 12px;

這種方式是能夠將字體縮小到將近10px，可是包裹字體的標籤(div,p)的寬度、高度甚至是margin等值都縮小了0.8333333，假如設計同窗給你的div的高度是20px，如今爲了能正確顯示20px的高度，你必需要將高度設置爲(20/0.8333333)px，寬度和margin的值的設置也是這樣；要想讓其居中，也必須將line-height設置爲(20/0.8333333)px；這種計算方式比較複雜，且這種方式可能會影響到文檔流中其餘元素的位置，因而就有了以下的方式二的產生。

---

方式二

方式二中有兩個比較重要的點：
（1）對於小於12px的字體，可先將其擴大二倍，而後使用transform縮小0.5倍
（2）在標籤的位置方面，能夠給它一個相對定位的父元素，此父元素的高度和寬度可按照設計圖設置，而後將它的定位設置爲相對定位，而且使其位於父元素的中心（垂直水平都居中）
HTML結構以下：

<div class="parent">
    <div class="child">
        我要垂直水平居中
    </div>
</div>

css樣式：

.parent{
    position: relative;
    width: 120/@rem;
    height: 24/@rem;
    overflow: hidden;   
}
child{
    position: absolute;
    top: -50%;
    left: -50%;
    width: 240/@rem;
    height: 48/@rem;
    line-height: 48/@rem;
    font-size: 36/@rem;
    color: #ffffff;
    transform: scale(0.5);
    background: #fa5d5f;
    border-top-left-radius: 16/@rem;
    border-bottom-right-radius: 16/@rem;
    box-sizing: border-box;
}

parent和child的關係以下圖所示，其中parent至關於用來佔位，這樣縮放就不會影響到parent外面的父元素，由於進行縮放的是絕對定位的child，它不在文檔流內，並不會影響到其餘元素在文檔流中的位置。

另外，附送兩個小tips
（1）小於12px的字體（或者說微信webview）不適用line-height,可是在大於等於12px的字體（或者非微信webview）適用line-height,那麼從這方面就能夠嘗試經過csshack的方式來實現了，因此若是想用line-height作居中處理，最好不要使用小於12px的字體，可使用方式一進行縮放；
（2）字體最好使用偶數像素，基數像素在顯示時，一般會遇到1個像素誤差，沒法徹底居中，這個能夠和設計同窗商量。