问题：height 与line-height 组合实现单行文字垂直居中，在Android下总是不居中问题
场景： 邀请收徒 复制邀请码按钮
原因：安卓设备像素转换物理像素的值不一致
解决方案： 利用padding-top 和 padding-bottom 和字体大小 结合zoom缩放来调整居中 目前适合的 有 24/@rem 31/@rem 33/@rem 34/@rem 35/@rem 40/@rem 42/@rem 48/@rem 只能根据UI设定的字体来微调。
.v-center(@height, @fontSize) {
@ratio: @fontSize / (48/@re);//计算比例
display: block;
box-sizing: border-box;
line-height: 1;
height: auto;
text-align: center;
font-size: 48/@re;
padding-top: ((@height/@ratio) - (48/@re))/(2/@ratio);
padding-bottom: ((@height/@ratio) - (48/@re))/(2/@ratio);
zoom: @ratio;
}
例如：我要实现一个垂直居中的按钮
<a href="" class='btn'></a>
.btn{
width:120/@re;
border-radius:100/@re;
color:#fff;
text-align:center;
position:absolute;
top:30/@re;
right:30/@re;
.v-center(54/@re,24/@re);
}
要用less写
