移动端设置行高等于高度的时候文本不居中???

最近在公司上班写移动端代码的时候发现了个很有意思的问题,用css写出来的按钮有时候总是莫名其妙的不居中,最奇怪的是只有在某些手机上不居中.(pc端一般不会出现问题)

height: 36upx;
line-height: 36upx;

设置行高等于高度,之前让按钮文本居中都是这样去设置的,发现出现上述问题后就一直在找原因,最后发现了影响到不居中的原因主要有以下三点,大家如果遇到相似的问题可以尝试下.

1,文字大小小于12px

2,文字大小为奇数

3.按钮高度为奇数

如果还不能解决问题,可以尝试设置line-height等于文字的大小,然后用span之类的标签把文字包裹起来,用弹性布局让文字居中.

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

如果你有更好的解决方案,欢迎留言....