移动端字体小于12px无法垂直居中
2019-04-03 本文已影响0人
八点半的星光1101
想要的效果：
1554272360(1).jpg
问题：在移动端小于12px的字体使用line-height无法使其垂直居中
DOM：<div class="record-status">兑换成功</div>
在网上找了多种方法
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，否则位置会发生变化
结论：亲测有效
