问题
使用rem布局经常遇到文字垂直居中的场景,文字垂直居中的实现一般是设置相同的height和line-height,但是实际测试发现在显示上会出现一些差异,不能很好的垂直居中。pc上模拟器模拟出来的是垂直居中的没错,但是在实际手机中,手机渲染出来就是会偏上一些。
产生问题原因:
网上看到的解释:
1.每种浏览器对line-height
渲染程度都不一样,不仅仅是line-height
,其实平时写垂直居中这种布局的时候,不管用postion
还是box
布局,都不能且不可能在所有机器上绝对居中。
2.12px以下显示问题 可以采用先整体放大,再用css3缩小的方式解决
解决方案
兼容的方法就是不要设置height,line-height设置为1,用padding值上下相等来保持垂直居中。
或者调整增大font-size,避免12px一下显示问题(测试过确实可以实现),可以参考12px一下字体显示解决方案