## 按钮或标签内文字垂直居中问题(移动端)
经常碰到文字按钮或者文字标签内部文字需要垂直居中,但是,当我们调好效果后,总会发现在部分机型上无法达到完全垂直居中。

### 问题如何产生
1. 字体本身引起,字体距离上边与下边不等,通常距离上边短一点
2. line-height与font-size计算值之差为奇数(猜测)
3. android字体小于等于10px

### 字体本身引起(还需调研)
根据字体不同,ua不同,结果均不同。<br />
该问题产生的偏差基本较小,且无法一一兼容。<br />
可看文章[line-height和字体实际高度的计算](http://ucdchina.com/snap/3801)加深理解

### line-height与font-size计算值之差为奇数(理论上是这样,但实际上影响因素太多)
line-height与font-size计算值之差为奇数时,上下平分后产生小数点。
ua支持小数的平分,ua不支持小数的,上边多还是下边多取决于ua的规则。

### android字体小于等于10px
*一、解决思路:*
1. 尝试字体大于10px
2. 尝试font-size:10px,line-height为奇数如15px、17px
3. 尝试将原来的字体放大2倍,再使用scale缩小
4. 尝试内部文字vertical-align: -2px
5. 尝试其它垂直居中方法,如:table、flex、position

<br/>

*二、分析过程(上IOS,下Android):*
>可在移动端浏览[demo](https://qiuguorong.github.io/bxui/dist/example/#/label),IOS为iPhone6 10.1.1,Android为Galaxy Note3 Lite 4G v4.3
1. 12px<br/><br/>
  ![](http://img.winbaoxian.com/autoUpload/common/ios-label-12_4f25c9e0e1dee19.png)
  ![](http://img.winbaoxian.com/autoUpload/common/android-label-12_5717788d461c350.png)
2. 11px<br/><br/>
  ![](http://img.winbaoxian.com/autoUpload/common/ios-label-11_237a7f66bc2d79b.png)
  ![](http://img.winbaoxian.com/autoUpload/common/android-label-11_3f29105ad4ed17e.png)
3. 10px<br/><br/>
  ![](//img.winbaoxian.com/autoUpload/common/ios-label-10-remark_547c4a09320f219.jpeg)
  ![](http://img.winbaoxian.com/autoUpload/common/android-label-10_97c41106104bb26.png)
4. 20px与scale(.5)<br/><br/>
  ![](http://img.winbaoxian.com/autoUpload/common/ios-label-scale_c62cc4b3d506c05.png)
  ![](http://img.winbaoxian.com/autoUpload/common/android-label-scale_750e7d3504101fd.png)
5. tabel垂直居中<br/><br/>
  ![](http://img.winbaoxian.com/autoUpload/common/ios-label-table_a8a7188691bd1c9.png)
  ![](http://img.winbaoxian.com/autoUpload/common/android-label-table_737f6e9aa73c7be.png)
6. flex垂直居中<br/><br/>
  ![](http://img.winbaoxian.com/autoUpload/common/ios-label-flex_97a2bd3f87b5081.png)
  ![](http://img.winbaoxian.com/autoUpload/common/android-label-flex_e88ee1ee19827ad.png)
7. posotion relative absolute垂直居中<br/><br/>
  ![](http://img.winbaoxian.com/autoUpload/common/ios-label-position_ad2ce9ee22a04af.png)
  ![](http://img.winbaoxian.com/autoUpload/common/android-label-position_5238c43b53e1159.png)

*三、最终解决方案:*
1. 字体大于10px
2. 字体小于等于10px的按钮或标签使用图片替代
3. 使用position relative与absolute进行的定位
  <br / >该方法局限性较大,需要元素固定宽度与高度才能实现
4. 将原来的字体放大2倍,再使用scale缩小
  <br />IOS与Android均可垂直居中,但是因为scale缩放占据的原始尺寸不变,导致占用空间过大。
  <br />该解决方案的应用场景: 当标签不在正常文档流时,如positioin:absolute时,可以使用
  ```css
  .bx-label{
   font-size: 20px;
   transform: scale(0.5);
  }
  ```
  [zoom与transform:scale的区别](http://www.zhangxinxu.com/wordpress/2015/11/zoom-transform-scale-diff/)
  zoom的缩放改变了元素占据的空间大小；而scale的缩放占据的原始尺寸不变，页面布局不会发生变化
  <br/>
5. 内部文字vertical-align: -2px
  <br />IOS稍稍偏下,android可垂直居中
  <br />该方法会让元素高度增加2px,并且基线位置会向下偏移2px
  <br />该解决方案的适用性更大一点,非要解决IOS稍稍偏下问题,那只能通过判断UA来区分IOS与Android样式不同了
  ```html
  <div class="padding:1px 3px;font-size: 10px;background-color: #f43030;">
    <span style="vertical-align: -2px"></span>
  </div>
  ```

*四、参考:*
1. [android浏览器下line-height垂直居中为什么会偏离？](http://y.dobit.top/Detail/243.html)
2. [Android浏览器下line-height垂直居中为什么会偏离？](https://www.zhihu.com/question/39516424?sort=created)
3. [我对CSS vertical-align的一些理解与认识（一）](http://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8%AE%A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/)
4. [line-height和字体实际高度的计算](http://ucdchina.com/snap/3801)