移动端 line-height 不垂直居中问题

本文是从简书复制的, markdown语法可能有些出入, 想看"正版"和更多内容请关注 简书:

一般情况下, 我们把 line-height 的值设置为 height 的值, 就可以实现文字垂直居中

但貌似移动端不太友好, 文字总是略微偏上一点点, 这看上去就很不舒服了, 很影响用户体验

考虑过加上 padding: xxrem 0, 但结果还是不太满意...

最终找到两种解决办法, 代码如下

• 方法一

span {
    width: 1rem;
    height: 1rem;
    font-size: 0.12rem;
    color: green;
    background: lightblue;
    
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

• 方法二 (仅限于字数固定情况)

span {
    font-size: 0.12rem;
    color: green;
    background: lightblue;
    padding: 0.03rem 0.15rem;
}