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

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

一、常用的方式

• 1、transform缩放

  文本

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

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

  文本

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

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

  文本

• 文本居中，在最新的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保证了文字区域在父元素区域里面的居中