安卓手机设置line-height后不垂直居中的问题

在最近的项目中做了一些优惠劵信息和满减信息的样式，但是当字体小于12px后，发现安卓手机中样式没有垂直居中。下面是我解决这个问题的方法，如果有其他方法会继续补充！

html 部分

<div class="text-vertical">
<span class="text">我是【满200减20】，我要垂直兼容居中</span>
</div>

css 部分

.text-vertical {
background-color: red;
color: #fff;
height: 36px;
padding: 0 20px;
border-radius: 15px;

/*文案垂直居中 父元素代码方案*/
display: flex;
justify-content: center;
align-items: center;
line-height: normal;
}

.text-vertical .text {
/*小技巧：字体小于12号使用 小数点的偶数来处理Android机型上的 0.5像素差*/
font-size: 10.6px;

/*设置『无衬线字体』解决ios/android/winphone 三端阿拉伯数字统一渲染一致性*/
font-family: Helvetica Neue, Helvetica, -apple-system, Arial, sans-serif;
}

思路：使用flex布局

父元素使用flex布局做垂直居中，给父元素一个固定的高度，设置line-height:normal;

子元素字体小于12号，必须使用偶数值的单位 + 偶数的小数点（推荐）
比如：10px = 10.6px 、 8px = 8.8px 、 6px = 6.6px

子元素字体大于等于12号，直接设置单位即可
比如：12px = 12px 、 14px = 14px 、 16px = 16px

同时设置字体为：『无衬线字体』 主要解决是：ios/android/winphone 三端阿拉伯数字统一渲染一致性