移动web端安卓手机上元素中的文字垂直不居中的问题

问题：在元素中文字小于12px时并且元素当中的上下内边距过小时，安卓的浏览器会出现显示问题，
“我是挑战者”在安卓手机上明显的不垂直居中，如下图所示



解决办法：

1.将该元素中所有关于px的样式放大一倍再缩小一倍，如下图“.is-user”中所示（实现的效果如上图中的“我是版主”所示）

.is-not-user {
  width: 123px;
  height: 30px;
  border-radius: 15px;
  background-color: #f98d1a;
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: 30px;
  margin-left: 15px;
}
/* 转换后的 */
.is-user {
  width: 208px;
  height: 60px;
  border-radius: 30px;
  background-color: #f98d1a;
  font-size: 40px;
  color: #fff;
  text-align: center;
  line-height: 60px;
  margin-left: 20px;
  transform: scale(.5);
  transform-origin: 0% 50%;
}

2.将该元素改为flex布局，但是实际操作完成后效果不理想，稍微有点偏上

display: flex;
justify-content: center;
align-items: center;

*****多加一个子元素是个很棒的解决办法*****

(注意：1.此处flex与absolute不可同用  2.如果效果有点不理想，可调整文字的大小与盒子的高度的比例  3.非固定的文字可不根据图纸设置父盒子的大小，设置padding即可)

<div class="is-user">
  <span>我是版主</span>
</div>

.is-user {
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
   color: #fff;
   width: 104px;
   height: 30px;
   border-radius: 15px;
   background-color: #f98d1a;
}

3.将该元素改为table布局，将该元素外围加上一个table盒子,实现效果的代码如下，实现的效果和第二种差不多，稍微有点偏上

.container {
  display: table;
  .is-not-user {
    display: table-cell;
    vertical-align: middle;
  }
}

4.直接用不给元素高度用padding-top以及padding-bottom来实现垂直居中，实现的效果和第二种差不多，稍微有点偏上

5.如果是这种固定标签式的元素，文字基本不改变时，这种情况建议直接使用svg等图片代替