前言本文主要探讨Android系统下浏览器中小字号中文居中的实现和混合时的对齐处理。本篇文章灵感来自《Deep dive CSS: font metrics, line-height and vertical-align》（以下简称《Deep》），在此基础上写成。建议先阅读上一篇，也可以选择阅读大魔老师或方英航老师的翻译版。大漠版方影行版一直以来最简单的让前端文字垂直居中的方法就是line-height=height，浏览器会自动把line-height大于font-size的部分在top和bottom之间划分实现文字的居中效果。但是，当网页中有汉字时，尤其是10-12px的小字号，在某些Android机器上可能会出现字符上浮甚至超出容器的情况。对于这种现象，网上流传着各种解决方案，tabel-cell法，flex法等，但这种方法总是无效。原因是这种方法只是解决了line-box相对于外容器居中的问题。必须配合line-height:normal才能实现line-box中的文字居中。解决这个问题。下面将研究line-height:normal的有效原理和副作用处理。神奇的安卓字体根据《Deep》，在文字中可以标记的区域从小到大，分别是em-square、content-area和virtual-area。一般前者区域与后者区域大致居中，文本本身也大致居中于该区域。因此，无论使用哪种line-height，文本在line-box中居中似乎是理所当然的。但是，某些Android默认字体并非如此。下图两个字的font-size和height都是10px，左边行的line-height为1，等于font-size，右边行的line-height是正常的（由于DPR，这里看到的像素是实际像素的三倍）。由于不同的行高属性。左边line-box的大小等于ex-square，右边line-box的大小等于virtual-area=content-area+line-gap。下图左侧红框内的浅灰色区域为em-square，10px高，深灰色区域为content-area，高度为11px，右侧红框内的浅灰色区域为高度为14px的虚拟区域。可以看到此时em-square在content-area的底部，glyph在content-area的顶部，所以glyph根本没有以ex-square为中心。右边的行为和《Deep》描述的不一样。virtual-area相对于content-area多出来的3pxline-gap，并不是上下均匀分布的，而是全部堆叠在顶部。所以它看起来就像文本位于虚拟区域的中心。应用总结一下，line-height:normal可以让文字在那些奇怪的Android机器上垂直居中。当然这种风格会带来一个问题，就是line-box的高度不可控。这时候就需要上面提到的flex或者tabel-cell，让line-box相对于外容器居中，然后在外容器中设置高度即可。以下是使用示例。有效的样式是display:flex;对齐项目：居中。创建一个灵活的容器，然后将容器的子元素居中，让virtual-area多余的部分溢出到border之外，不影响布局。图中红框内的浅灰色区域为高度为12px的容器，深灰色区域为高度为16px的line-box和virtual-area。最终达到了12px容器中12px文字居中的目的。
