【css】移动端开发中，字体/字体图标垂直居中问题

前情提要

• 使用插件，自动将px转rem，所以开发中都是使用px；
• 在移动端网页开发过程中，写了一个类似tag（定高）的东西，但在一些设备上字体和字体图标没有垂直居中。

尝试了以下几种方法：

1. 设置字体line-height为tag高度，问题：在一些设备上，由于字体的font-size最小为12px，而line-height并没有最小的限制。×
2. 给字体加行高，给tag加padding的方式。 ×
3. 设置tag的高度，再设置display: inline-flex; align-items: center;的方式。×
4. 使用双倍的大小定义tag的css属性，再使用transform.scale(0.5)进行缩小，以解决font-size>=12px的问题。再设置tag元素的display: inline-table，其内的元素设置为display: table-cell;vertical-align: center;的方式垂直居中。√

具体实现

.rect-tag {
        height: 62px; // 翻倍，展现：31px
        box-sizing: border-box;
        padding: 0 24px; // 翻倍
        font-size: 40px; // 翻倍
        border-radius: 8px; // 翻倍
        transform: scale(0.5);
        display: inline-table;
        transform-origin: 0 0;
        .iconfont, span {
            display: table-cell;
            vertical-align:middle;
        }
}

使用上述方法能够解决tag内的元素垂直居中的问题，但随之也带来了其他的一些问题。

所引发的布局问题

由于transform: scale的缩放会使元素仍然占据原来的大小，即使我们缩小后元素的高度只有31px，但它仍然占据62px的高度，其他属性也同理。

因此，带来了布局上的错位问题。这里使用的是设置margin为负值的方式来解决，举例如下：元素A与tag之间原本是横向并排的。

在经过上述缩放后，它们之间的布局是这样的。

由于transform-origin: 0 0;，即元素缩放的基点。且将元素的scale设为1后，它们之间的距离消失，故得出结论：它们之间的距离等于元素tag的缩放后宽度。但由于元素tag的宽度并没有固定，因此需要使用js动态去获取，并设置元素A的margin-left，使得它们之间的距离恢复到原来的样子。代码如下：

this.$refs.yuansuA.style.marginLeft = -this.$refs.yuansuTag.clientWidth / 2 + 'px';

其中，获取到的元素tag的宽度是缩放前的，故需要除以2。

总结

整体实现起来稍微有点麻烦，希望能找到更优解来解决这个问题。

参考文章

http://dobit.top/archives/android%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%8Bline-height%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E4%B8%BA%E4%BB%80%E4%B9%88%E4%BC%9A%E5%81%8F%E7%A6%BB%EF%BC%9F.html