文字偏上原因总结

设置line-height等于height使文字居中， 在移动端会出现文字偏上的问题，原因可能有以下几个。

1. 文字小于12px，解决办法有两个。

• 使用transform，把文字放大到比12px大的大小

<style>
.content {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    transform: scale(0.5);
    transform-origin: 0% 0%;
}
</style>
<span class="content">testtesttesttesttest</span>

这种方法在部分机型可能出现兼容问题。

• 使用table-cell布局

<style>
.container {
    display: table;
}
.content {
    font-size: 10px;
    display: table-cell;
    vertical-align: middle;
}
</style>
<div class="container">
    <span class="content">testtesttesttesttest</span>
</div>

这种方法兼容性好，就是得多加一层容器。

2.font-size为奇数的原因。

如果一个行高为20px的文字是15px，可能出现上下空间分配不均的问题，尤其是没有解决1px border问题时，这种情况可能会更加明显，这里建议使用淘宝的lib-flexible方案。

参考目录

http://imweb.io/topic/5848d0fc9be501ba17b10a94
http://dobit.top/Detail/243.html