問題描述：用rem適配的H5頁面在安卓的webview中，當line-height等於height時，有時會稍微偏上一些，不能垂直居中（ps：ios上沒有這個問題）

1、分析原因：由於用rem作適配，則根元素的字型大小可能不是整數，然後將元素的字型大小設定為rem為單位時，字型實際的大小若以px為單位則可能是奇數（更可能並不是整數）；且當字型大小小於12px時，安卓webview中的瀏覽器為了避免奇數font-size帶來的偏差，自動設定成了偶數，所有會有一些偏上。

2、解決思路

<1> 改變字型大小使其大於12px

改變字型大小讓它大於12 px（擴大2倍），將字型盒子的盒子相關屬性（寬度、高度、行高、內邊距、圓角、字型大小等）設定為需求大小的 2 倍，再使用transform進行縮放 0.5 倍，此時字型大小已大於12px，能夠正常居中。

.btn {
      float: right;
      width: 1.62rem *2;
      height: .64rem *2;
      line-height: .64rem *2;
      text-align: center;
      border-radius: 2rem *2;
      font-size: .28rem *2;
      color: #282624;
      letter-spacing: 0;
      margin: .28rem -1.22rem 0 0;
      // 安卓webview中line-height不垂直居中問題
      transform: scale(0.5);
      transform-origin: 0% 0%;
    }
 

最佳實踐：適用於單個或者是一排的佈局。當為多行或者列表時，因為transform縮放是不影響頁面佈局的，需用定位將字型盒子進行脫標才行。

<2> 使用自適應表格佈局 - - table佈局

由於table佈局和浮動一起使用會失效，所以在字型盒子外在包一層盒子，將浮動應用在此外層盒子上即可。

.outer {	/* 外層盒子進行浮動 */
    float: left;
}
.inner {
    font-size: 10px;  /* 字型大小小於12px的內層盒子進行表格佈局 */
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
 

最佳實踐：只要相容table佈局，這種方法便適用。