移动端垂直居中字体偏上解决方案

平时开发移动端的小项目比较多，针对于很多兼容性问题也是比较熟悉的，今天就谈谈字体垂直居中的小问题吧，其实我们不难发现在一些还不错的app或者网页中很常见的就是ios看起来是垂直居中的但是安卓明显偏上，在pc端也是没问题的，但是唯独在手机设备上确实明显的不一样，这是因为每一款移动设备的行高是不一样的，安卓跟苹果更是不同，所以我们就不能使用line-height了，好了，不bb了，说正经的……

当产品让我们实现这么一个按钮样式

很显然这个文字必须要垂直居中，但是两端还要实现一个半圆的效果，这时候我的实现方法是

.btn{
    /*下面是重点*/
    display: block;
    width: 300/@r;
    padding:10/@r;
    font-size: 30/@r;
    border-radius:30/@r;


    background-color:#36a3f7;
    color: #fff;
    text-align: center;
}            

下面我解释一下为什么要这么做，首先字体大小也就是font-size: 30/@r;font-size其实就是字体的高度30那么我又设置了一个上下的padding：10,按钮的圆角最小值应该是多少才合适呢？我们简单的计算一下，字体高度的一半是15，我们又给了一个上下的间距10那么圆角的最小值就是25，但是我设置的是border-radius:30/@r;也就是30这个值，只要不低于25这个值都是可以的

说了一堆废话，最关键的就是这个高度怎么设置：按钮的高度=字体的大小+padding的值，使用了padding我们就轻松地解决了很多移动端按钮字体不居中的问题，其实字体是否居中白底黑字是看不出效果的只有当字体有了底纹或者是按钮里面的字，或者是带有半圆的按钮，可以采用这个方法