H5 --（解决）安卓的webview中line-height等于height不垂直居中问题

问题描述：用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布局，这种方法便适用。