移动端Android line-height不居中

使用line-height垂直居中时，发现在IOS上显示很正常，但是在安卓机上显示不居中偏上，大约会往上移2px左右，用户体验差。

网上说需要字号大于 12px 才能够正常居中，且无小数点的整数，并且还要字号为偶数，即：

• 字体大小不要使用奇数字号，带小数点的更不要提了。也就是说被2整除的整数且不可小于12px。 
• 使用rem的单位时造成（根元素如果动态改变时，根元素字体可能不是整数）。

但现在越来越多的移动界面使用rem适配，不仅可能是奇数还可能不是整数。

常用思路：

1.把字号内外边距等设置为需求大小的2倍，使用transform进行缩放。只能针对 单个或者是一排的布局进行缩放，如果是父级自适应高度且可展示多行的，使用transform是有问题的。因为transform缩放是不影响页面布局的。

2.把字号内外边距等设置为需求大小的2倍，使用zoom进行缩放，可以完美解决。 

3.把line-height设置为0，使用padding值把元素撑开，说是可以完美解决（经过测试，没有用的！）。

 

常用方案如下：

方案一：先放大两倍设置，再用 scale 缩小一倍显示

.content {
    height: 40px;
    line-height: 40px;
    font-size: 20px; 
    /*以上的值均扩大2倍设置，以下缩小2倍显示*/

    transform: scale(0.5);
    transform-origin: 0% 0%;
}

方案二：table布局

.container {
    display: table;
}

.content {
    display: table-cell;
    vertical-align: middle; //列垂直居中
}
    

方案三：不设置height，用内容+padding撑起容器，使其垂直居中

此方案在移动上，整体高度不能太小，否则没效果，特别是rem，换算成px的时候，可能存在小数点，即存在盈亏划分。

 

 

来源：https://blog.csdn.net/CamilleZJ/article/details/101027119