解决安卓浏览器文本无法垂直居中的问题

安卓 webview 的字体大小在小于 12 像素的时候无法使用行高来垂直居中

ps：目前在微信等应用都存在该问题，而在最新的移动端 Chrome 浏览器上无该问题（截止本文编写时间，微信客户端的 chrome 版本为 57，chrome 版本为 70）。

在不同的安卓客户端上测试上述方法发现以下三个方法或许可以帮助解决居中问题，我们可以根据实际客户端的支持情况来选择其中一种方式来解决无法居中问题。

transform 缩放

<div class="solution" style="height: 32px; line-height: 32px; font-size: 20px; transform: scale(0.5, 0.5); transform-origin: left top;">
  <span>hot 热门</span>
</div>

内边距+行高设为 normal

<div class="solution" style="box-sizing: border-box; padding: 2px; line-height: normal; font-size: 10px;">
  <span>hot 热门</span>
</div>

行高+字体大小设为 initial

<div class="solution" style="line-height: 16px; font-size: initial;">
  <span style="font-size: 10px;">hot 热门</span>
</div>

flex 布局

<div class="solution" style="line-height: normal;display: inline-flex; align-items: center; height: 16px; line-height: 1; font-size: 10px;">
  <span>hot 热门</span>
</div>

其实关键点在于 line-height: normal。 外层用 flex 还是 padding，或者其他的都可以！一般垂直居中还要考虑当前高度是否双倍单位，比如文字12px, 内容高度25px时是无法垂直居中，内容高度设置24或者26才可以。