移动端字体小于12px无法垂直居中

想要的效果：

1554272360(1).jpg

问题：在移动端小于12px的字体使用line-height无法使其垂直居中
DOM：

兑换成功

在网上找了多种方法

1、使用flex布局

display:flex;
justify-content:center;
align-items:center

结论：居中无效（可能跟dom有关系吧，反正我这样确实没实现想要的效果）

2、使用padding

padding:v1 v2;
//通过padding把容器撑开

结论：无效

3、使用css3

思路：小于12px时无效，那就设置字体大小时先扩大一倍，即：设计稿12px，那么就设置font-size:24px,然后通过transform:scale(0.5)将其缩放一半
注意：针对这样的DOM结构，不止要字号扩大，宽高同样要扩大，同时，还要注意缩放的基准点，设置transform-origin，否则位置会发生变化
结论：亲测有效