安卓手机浏览器兼容文字的垂直居中问题
问题：在元素中文字小于12px时并且元素当中的上下内边距过小时，安卓的浏览器会出现显示问题，
“我是挑战者”在安卓手机上明显的不垂直居中，如下图所示
解决办法：
1.将该元素中所有关于px的样式放大一倍再缩小一倍，如下图“.is-user”中所示（实现的效果如上图中的“我是版主”所示）
2.将该元素改为flex布局，但是实际操作完成后效果不理想，稍微有点偏上
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
*****多加一个子元素是个很好的解决办法*****
<div class="is-user">
<span>我是版主</span>
</div>
.is-user {
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
color: #fff;
width: 100px;
height: 50px;
border-radius: 25px;
background-color: orange;
}
3.将该元素改为table布局，将该元素外围加上一个table盒子,实现效果的代码如下，实现的效果和第二种差不多，稍微有点偏上
.container {
display: table;
.is-not-user {
display: table-cell;
vertical-align: middle;
}
}
4.直接用不给元素高度用padding-top以及padding-bottom来实现垂直居中，实现的效果和第二种差不多，稍微有点偏上
5.如果是这种标签式的元素，文字基本不改变时，这种情况建议直接使用svg等图片代替