安卓手机移动端垂直居中的问题

开发的时候发现一个垂直居中的效果在ios上是好的，安卓上会整体靠上些，大概搜了一下现有解释，会由以下方法导致

• 字体大于12px是没有问题的
• 字体小于12px 安卓上会整体靠上些
  font-size 小于 12px 的时候，利用 line-height 属性进行垂直居中布局明显是偏上的，这里为了避免由于 font-size 是奇数带来的偏差，特意把 font-size 都设置成了偶数

现有解决办法
1、transform 的 scale

    <span class="tips">testtesttesttesttest</span>
.tips{
    font-size: 20px;
    line-height: 30px;
    transform: scale(0.5);
    transform-origin: 0% 0%;//更改一个元素变形的原点
}

2、 table布局 在元素外再包一层，使用表格布局

<div class="container">
    <span class="tips">testtesttesttesttest</span>
</div>
.container {
    display: table;
}
.tips {
    background-color: gray;
    font-size: 10px;
    display: table-cell;
    vertical-align: middle;
}

查看原文