前幾天的一篇博文：移動Web單行文字垂直居中的問題，提到了移動web里小于12px的文字居中異常的問題，最后還是改為12px才近乎解決了問題。但是有時候或許并不是那么樂觀，你并不能將原本定為10px的字體改為12px。那該怎么辦呢。

我們都知道，移動端為了高清屏顯示1px的border，會有那么幾種方法，通常最好的方法是transform scale，并且支持圓角。既然一個border能縮放，那么整個文字區域自然也能縮放。

比如上篇博文里的示例，CSS是這樣的：

.label {height: 20px;line-height: 20px;font-size: 10px;border: 1px solid #000; }

既然要縮放，就把1px border也一起做的，省的再添加一個偽類，我們將各個尺寸乘以2，然后縮放為原來的一半：

.label {height: 40px;line-height: 40px;font-size: 20px;border: 1px solid #000;-webkit-transform: scale(0.5);transform: scale(0.5);-webkit-transform-origin: 100% 100%;transform-origin: 100% 100%; }

但，或許是line-height在移動端確實不怎么樣，居中效果并不好，改為padding才好了些。

再嘗試一種方案，給元素外層再包一層父元素，用display：table來實現。

<div class="label-parent"><p class="label">你是誰</p> </div> .label-parent {display:table;height: 40px;line-height: 40px;font-size: 20px;border: 1px solid #000;-webkit-transform: scale(0.5);transform: scale(0.5);-webkit-transform-origin: 100% 100%;transform-origin: 100% 100%; } .label {display: table-cell;vertical-align:middle; }

這樣應該是比較健全的的方案，多寫一層，拋棄掉padding和line-height，最后實現的效果也不錯。有童鞋可能會擔心會糊，確實chrome模擬器是會糊的，但手機屏幕大都是高清屏幕，幾乎不會出現模糊的情況。

?

在IOS和Android4.x上工作正常，但Android2.3 ?并不會縮放，搜索一通有說是scale和translate一起不管用的，有說viewport設置的，不過都沒用，所以可以給Android2.x單獨設置未縮放的樣式，只要排版不亂就好。

.label-2x {height: 20px;line-height: 20px;font-size: 10px;border: 1px solid #000; }

那如何知道系統是2x呢，在Special CSS3 Scaling for andriod version less than 2.3發現了一段好用的腳本：

var ua = navigator.userAgent; if( ua.indexOf("Android") >= 0 ) {var androidversion = parseFloat(ua.slice(ua.indexOf("Android")+8));if (androidversion <= 2.3) {// alert('andriod < 2.3');// your code here } }

你可以動態的加一段css到style里，如果只有一個標簽你也可以直接操作dom改變樣式。

?

至此，再不完美也不想不想再折騰了。。。

轉載于:https://www.cnblogs.com/zjzhome/p/4913741.html

總結

以上是生活随笔為你收集整理的完美解决移动Web小于12px文字居中的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。