android源代码居中字体,一篇文章了解移动端文本垂直居中

在日常工作中，经常会遇到图片+文字+背景色的设计稿实现。经常我们在Chrome浏览器上调试的好好的，但是到了移动端就会有各种奇特的适配问题——最经常遇见莫过于Android中文字稍微偏上了。在iOS和Android上的调试，常常让工程师们苦不堪言。本文对文字的垂直居中做了初步的研究，描述了为什么会出现偏移，并给出了弹性盒子布局的方案(适配大部分情况)，希望能对大家的工作带来一点帮助。

1. 为什么Android中文本偏上

文本都会有一个内容区域，这个区域就是我们选中文本时展示的区域。Android在渲染文本的时候会参考字体，但是原生Android又没有默认的中文字体，这就导致了它使用英文字体来进行内容区域的设置，让文本在内容区域中就偏移了。而CSS是通过内容区域来设置垂直居中的，所以这个问题从根子上就错了。对于低版本的Android机器(7.0以下)，单纯CSS的方法是不够的。

2. 实现文本垂直居中的方案

对于7.0以上的Andriod机器，我们使用以下特性，来实现一个文本垂直居中的方案。

1.1 使用弹性盒子布局

display: flex;

align-items: center;

利用弹性盒子进行垂直居中来保证PC和iOS的垂直居中。

注意：在此方案中，我们使用的是弹性盒子布局，块级元素中的line-height不是指行间距，而是指块级容器内部line-box的最小高度。line-height和height设置为同样的值指针对内联元素，不适用于本方案。另外，line-height的默认值是normal，被不同的浏览器实现为1，1.2或者其他的值，强行把line-height设置为1也会导致错位。</