移动端安卓实现页面垂直居中方法

一个最基础的文本垂直居中，是这样：

<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的值来撑开实现垂直居中。

以上这些方法都用了各种安卓浏览器进行了测试，表现各不相同，但没有一个方法能实现所有版本的完全垂直居中，都有一些稍微的偏上。如果对视觉要求百分百实现，可以通过图片来实现。

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

 

转载于:https://www.cnblogs.com/Glutton/p/10558236.html