一个最基础的文本垂直居中，是这样：
<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
