問題：在元素中文字小於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: 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等圖片代替