关于移动端按钮文字垂直不居中问题

通常情况是直接line-height 等于 height 可以实现文字居中，chrome模拟器中正常， 但是在真机有差别, 在安卓端表现由为明显。

例如按钮一:

/*
  <div class="btn btn01">
       <span>按钮一</span>
  </div>
*/
/* btn 公用样式  */
.btn{
    display: block;
    background-color: #fff;
    color: #000;
    width: 1.2rem;
    border-radius: 0.38rem;
    text-align: center;
    margin: 0.3rem 0.1rem;
    font-size: 0.2rem
}

/* 按钮一 */
.btn01 {
    height: 0.38rem;
    line-height: 0.38rem; 
}

（LeTv）安卓6.0.1

不同终端产生差异主是由dpr不同，line-height 值表现也有差异，以及采用rem布局时产生了小数导致。至于更详细原因这里就不做深究了，那么如果这样的话，是不是用line-height: normal, padding: 5px 0, 就可以解决呢~

例如按钮二：

/*
  <div class="btn btn02">
          <span>按钮一</span>
  </div>
  <div class="btn btn02">
       <span>按钮二</span>
  </div>
*/
.btn02{
   line-height: normal
}
.btn02 span{
      display: block;
      padding: 0.07rem 0;
  }

（LeTv）安卓6.0.1

由此可见效果并不理想，那就直接看码：

                <div class="btn btn03"><span>按钮三</span></div>
                <div class="btn btn04"><span>按钮四</span></div>
                <div class="btn btn05"><span>按钮五</span></div>

     .btn.btn03{
        display:table;
        height: 0.78rem;
        line-height: 0.78rem;
        width: 2.4rem;
        font-size: 0.4rem;
        -webkit-transform: scale(.5);
                transform: scale(.5);
        -webkit-transform-origin: 0% 0%;
                transform-origin: 0% 0%;
    }
  .btn.btn03 span{
            display: table-cell;
            vertical-align:middle;
        }

.btn.btn04{
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        height: 0.38rem;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
            -ms-flex-align: center;
                align-items: center;
    }

.btn.btn05{
        position: relative;
        height: 0.38rem;
    }
.btn.btn05 span{
            position: absolute;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%)
        }

篇幅有限，只展示部分机型了

结论

经过大多数主流机型测试总结以下两点（因为不完全覆盖到所有机型，所以特殊情况除外）：

• 按钮三 表现与预期差距最小，表现最优，但注意width height font-size 都写原尺寸的两倍，再通过scale 来缩小 0.5（推荐）
• 其次是按钮五，通过子元素的绝对定位与 transform: translate(-50%, -50%)，来实现文字的水平垂直方向的居中（不推荐）