按钮文字垂直不居中问题

在开发需求中，遇到了按钮文字不居中的问题，问题出现得有些奇怪。

问题概述

需求开发完毕，UE在验收页面的时候，过来给我报了个问题，在某个按钮上的文字不居中。

看了一下代码，相关代码是这样写的：

css：

.btn {
    height: rem(20);
    line-height: rem(20);
    // 其他代码省略
}

jsx：

<div className="btn">点我邀请</div>

我原来的代码是用让高度等于行高的方式来居中的，既然这样不行，那试一试其他居中方法，最常用的当然还是flex了。

我把代码改成了这样：

.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    height: rem(20);
    // 其他代码省略
}

发现居中效果达到了。虽然问题解决了，但是为什么为什么原来的代码会有问题呢，看下面的参考链接就能懂了。