一个最基础的文本垂直居中,是这样:
<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的值来撑开实现垂直居中。
以上这些方法都用了各种安卓浏览器进行了测试,表现各不相同,但没有一个方法能实现所有版本的完全垂直居中,都有一些稍微的偏上。如果对视觉要求百分百实现,可以通过图片来实现。
大家有什么更好的解决方法,也可以互相分享。