Android浏览器下line-height垂直不居中的问题

<span class="send">发布</span>

.send{
  float:right;
  width:1.62rem;
  height:.74rem;
  line-height:.74rem;
  text-align:center;
  font-size:.3rem;
  border-radius:.06rem;
  color:#fff;
  background-color:#0CACFF;
}

真机测试发现在Android浏览器下line-height垂直不居中的问题，网上百度了一下，在这里做一下备忘总结。

可知原因：

1、字体大小不要使用奇数字号，带小数点的更不要提了。也就是说被2整除的整数且不可小于12px。 

2、使用rem的单位时造成（根元素如果动态改变时，根元素字体可能不是整数）。

解决办法：

display: table-cell;/*元素的作用就像<td> 一样。*/
text-align: center;/*水平居中*/
vertical-align: middle;/*垂直居中*/

display: table-cell使元素就像<td> 一样，同时也造成当前元素不具有默认宽和高，所以要显示设置一下width、height值。

这种布局和浮动一起使用会失效，解决这个问题可以在外面包一个标签，把浮动属性放在此元素上。

<span class="send" data-font="发布"></span>

.send{
  float:right;
}

.send:before{
  content:attr(data-font);
  display:table-cell;
  text-align:center;
  vertical-align:middle;
  width:1.62rem;
  height:.74rem;
  font-size:.3rem;
  border-radius:.06rem;
  color:#fff;
  background-color:#0CACFF;
}

通过上面的方法，可以做到很好的改善。对于比较小的高度，这方法不起作用，建议设置line-height:0;padd上下来折中来处理。