一般情况下, 我们把 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;
}