共计 2033 个字符，预计需要花费 6 分钟才能阅读完成。
在日常工作中，经常会遇到图片 + 文字 + 背景色的设计稿实现。经常我们在 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 也会导致错位。
1.2 给 Android 设置中文字体
在文本元素添加属性 lang=’zh-cmn-Hans’，代表中文 - 国语 - 简体，手动给 Android 设置中文。也可以在 html 元素中设置，但是会影响页面中英文文本的展示。
<div class=”test” lang=”zh-cmn-Hans”>
或者
<html lang=”zh-cmn-Hans”>
1.3 font-size 设置为 vw 避免适配
vw: 屏幕宽度的 1%，业界最新的适配方法。在 750 宽度的屏幕中，1vw=7.5px。具体概念及使用方法可以参考《茴字的四种写法—移动适配方案的进化》
我自己的实践经验，我发现当 font-size 值设置为 0.5vw 倍数时——例如 0.5vw, 1.5vw, 2vw…，** 在移动端配合弹性盒子布局总能垂直居中（某些低端机型要设置为 1vw 的倍数）。
PS: 应该涉及到某些具体的屏幕像素原理，期待能后期补充。
1.4 实际 Demo
URL：http://h5.ssp.qq.com/static/t… 源码：
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title> 块级元素实现文字垂直居中 </title>
<style>
.container {
display: flex;
}
.icon-container {
background: #EDF5FF;
border-radius: 0.5vw;
display: flex;
justify-content: space-between;
}
.text {
display: flex;
align-items: center;
color: #377DF8;
font-size: 1.5vw;
background: #EDF5FF;
}
.icon {
width: 4.27vw;
height: 4.27vw;
margin: auto 1.07vw;
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
}
.download-icon {
background-image: url(‘http://h5.ssp.qq.com/static/web/websites/newsplugin/static/image/download_app_32.png’);
}
</style>
</head>
<body>
我们会测试移动端图片 + 文字的居中
<div class=”container”>
<div class=”icon-container”>
<div class=”icon download-icon”></div>
<div class=”text” lang=”zh-cmn-Han”> 立即下载 </div>
</div>
</div>
</body>
</html>
参考文献：
《Android 浏览器下 line-height 垂直居中为什么会偏离？》
