处理Android安卓line-height无法垂直居中

遇到android文本无法垂直居中问题，众里寻他千百度、google，好不容易解决了

一、常用的方式

• 1、transform缩放

<div class="text-box" style="height: 32px; line-height: 32px; font-size: 20px; transform: scale(0.5, 0.5); transform-origin: left top;">
  <span>文本</span>
</div>

• 文本居中了，但是transform不能还原元素在dom上的占用区域大小

• 2、内边距+行高设为normal

<div class="text-box" style="box-sizing: border-box; padding: 2px; line-height: normal; font-size: 10px;">
  <span>文本</span>
</div>

• 文本居中，但在部分客户端上不居中

• 3、行高+字体大小设为initial

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

• 文本居中，在最新的Chrome浏览器上不居中

• 4、强行margin-top

.text-box::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 100%;
    margin-top: 1px;
}

• 不好控制margin-top的值，而且也会影响ios端的显示效果

• 5、flex

.text-box {
      height: 36px;
      display: inline-flex;  /* 或者display: flex */
      align-items: center;
}

• 测试下来不垂直

二、我的处理方式

• flex+行高设为normal

-            display inline-block
+            display inline-flex
+            align-items: center
             height 34px;
-            line-height: 34px;
+            line-height: normal;

• line-height为normal会自动配置文字区域，让文字在文字区域处于居中，而自己设置line-height为其他值实现不了在各个端让文字在文字区域居中
• flex保证了文字区域在父元素区域里面的居中