举个栗子
正常情况文字是垂直水平居中，即使是阿里这种大厂，在webapp端，H5页面也存在安卓渲染文字上浮的情况。
那要怎么解决这种情况？
方案
1.设置默认字体+UED设计约束
@font-face { font-weight: normal; font-style: normal; font-family: 'DINPro-Medium'; src: url('../../../assets/font/DINPro-Medium.ttf') format('truetype');}body,html{ font-family:DINPro-Medium;}复制代码 给H5工程设置默认字体，UED团队在设计阶段就尽量减少低于12px的元件设计（低于12px会导致文字上浮）。
2.transfrom+transform-origin
.content { display: inline-block; height: 40px; background-color: gray; line-height: 40px; font-size: 20px; transform: scale(0.5); transform-origin: 0% 0%;}复制代码 将元件属性放大2倍，在使用scale进行缩放，亲测有效并也在业务中使用到，但是这种方式也有缺点：元件属性放大2倍，所以占据页面空间也扩大了2倍，因此适用性并不好。
3.table布局
看了很多相关文章，有人说可以完美解决，但是测试后并不是这样
.coinBox{ display: table; margin-left: 0.3rem; .coinNum{ color: #fff; height: 0.26rem; font-size: 12px; display: table-cell; vertical-align: middle; }}复制代码 .coinBox{ display: table; margin-left: 0.3rem; .coinNum{ color: #fff; height: 0.26rem; font-size: 10px; display: table-cell; vertical-align: middle; }}复制代码 result: 只是修改了font-size为10px，就导致渲染 ”领100金币“ 文字上浮。
4.flex
.getCoinButton{ width: 0.93rem; height: 0.26rem; background-image: linear-gradient(-90deg, #FF3411 11%, #FF7859 89%); border-radius: 100px; position: absolute; right: 0.16rem; top: 50%; transform: translate(0,-50%); display: flex; align-items: center; justify-content: center; .coinButtonHead{ width: 0.14rem; height: 0.14rem; } .coinNum{ font-size: 12px; color: #fff; margin-left: 0.04rem; }}复制代码 .getCoinButton{ width: 0.93rem; height: 0.26rem; background-image: linear-gradient(-90deg, #FF3411 11%, #FF7859 89%); border-radius: 100px; position: absolute; right: 0.16rem; top: 50%; transform: translate(0,-50%); display: flex; align-items: center; justify-content: center; .coinButtonHead{ width: 0.14rem; height: 0.14rem; } .coinNum{ font-size: 9px; color: #fff; margin-left: 0.04rem; }}复制代码 只是修改了font-size为9px，就导致渲染 ”领50金币“ 文字上浮。
结论
1.低于12px实现垂直水平居中，在安卓上还是像小强一样顽强很难解决。
2.设置默认字体是比较通用的处理方式, 搭配table、flex灵活布局（处理>=12px的场景）。
3.需要前端+UED推行设计约束来从根本解决。
ps：有大佬能提供好的解决方案请赐教～感谢?
参考文章：
IMweb社区：
知乎：