移動端安卓實現頁面垂直居中方法

一個最基礎的文本垂直居中，是這樣：

<div class="dis-member-banner-share">
   <span class="dis-member-banner-share-text">分享做朋友</span>
</div>

.dis-member-banner-share {
  width: 165rem/@baseNumber;
  height: 36rem/@baseNumber;
  line-height: 36rem/@baseNumber;
  border: 1rem/@baseNumber solid #666;
  border-radius: 25rem/@baseNumber;
  text-align: center;
  &-text{
    font-size: 22rem/@baseNumber;
    color: #333;
    opacity: 0.8;
  }
}

 

在電腦模擬器上面看沒毛病，ios手機上也很完美，但是用安卓手機瀏覽器測試，有的瀏覽器嚴重位置偏移（這里注意，高度和字體最好設置成偶數，奇數更容易出現問題）。

解決辦法：

1、盒子相關屬性設置為需求兩倍再通過transform縮放0.5

.dis-member-banner-share {
  width: 165rem/@baseNumber*2;
  height: 35rem/@baseNumber*2;
  line-height: 35rem/@baseNumber*2;
  border: 1rem/@baseNumber*2 solid #666;
  border-radius: 25rem/@baseNumber*2;
  text-align: center;
  transform: scale(0.5);
  transform-origin: 0% 0%;
  &-text{
    font-size: 22rem/@baseNumber*2;
    color: #333;
    opacity: 0.8;
  }
}

2、借助flex布局實現垂直居中

.dis-member-banner-share {
  display: flex;
  width: 165rem/@baseNumber;
  height: 36rem/@baseNumber;
  border: 1rem/@baseNumber solid #666;
  border-radius: 25rem/@baseNumber;
  justify-content: center;
  align-items:center;
  &-text{
    font-size: 22rem/@baseNumber;
    color: #333;
    opacity: 0.8;
  }
}

3、借助table布局實現垂直居中

.dis-member-banner-share {
  display: table-cell;
  width: 165rem/@baseNumber;
  height: 36rem/@baseNumber;
  border: 1rem/@baseNumber solid #666;
  border-radius: 25rem/@baseNumber;
  text-align: center;
  vertical-align: middle;
  &-text{
    font-size: 22rem/@baseNumber;
    color: #333;
    opacity: 0.8;
  }
}

4、不設置高，直接通過padding的值來撐開實現垂直居中。

以上這些方法都用了各種安卓瀏覽器進行了測試，表現各不相同，但沒有一個方法能實現所有版本的完全垂直居中，都有一些稍微的偏上。如果對視覺要求百分百實現，可以通過圖片來實現。

大家有什么更好的解決方法，也可以互相分享。