H2标签内文本无法垂直居中问题排查

我编写了一段代码，希望<h2>元素中的“0”能够垂直居中。但无论我如何调整.score类的样式，“0”始终停留在顶部居中位置，无法向下移动。

对应的代码如下：

CSS代码 #

body {
    margin: 0;
    background-color: #0369A1;
    text-align: center;
}

@font-face {
    font-family: CursedTimerUlil-Aznm;
    src: url(fonts/CursedTimerUlil-Aznm.ttf);
}

h3 {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: #EEE;
    font-size: 40px;
    font-weight: 700;
    margin: 21px;
}

.score {
    font-family: CursedTimerUlil-Aznm;
    border: 3px solid #BE123C;
    border-radius: 4px;
    background-color: #FB7185;
    width: 200px;
    font-weight: 400;
    font-size: 90px;
    margin: 28px 0;
}

.container {
    display: flex;
    justify-content: space-around;
}

.counters {
    display: flex;
    justify-content: space-between;
    margin: 0;
}

.counter-btn {
    font-family: CursedTimerUlil-Aznm;
    font-weight: 400;
    font-size: 18px;
    width: 48px;
    height: 48px;
    border: 2px solid #EEE;
    border-radius: 3px;
    color: #EEE;
    background-color: #0369A1;
}

HTML代码 #

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <div class="container">
            <div class="card">
                <h3>HOME</h3>
                <h2 class="score">0</h2>
                <div class="counters">
                    <button class="counter-btn">+1</button>
                    <button class="counter-btn">+2</button>
                    <button class="counter-btn">+3</button>
                </div>
            </div>
            <div class="card">
                <h3>GUEST</h3>
                <h2 class="score">0</h2>
                <div class="counters">
                    <button class="counter-btn">+1</button>
                    <button class="counter-btn">+2</button>
                    <button class="counter-btn">+3</button>
                </div>
            </div>
        </div>
    </body>
</html>

我还有另一段代码，其中的“0”能够完美垂直居中，但我无法找出第一段代码的问题所在，也不清楚两段代码之间的差异。

正常运行的代码如下：

CSS代码 #

body {
    margin: 0;
    text-align: center;
}

.score {
    background: #0a0001;
    font-size: 90px;
    color: #F94F6D;
    width: 120px;
    margin: 20px;
}

.container {
    display: flex;
    justify-content: space-around;
}

button {
    background: none;
}

HTML代码 #

<html>
    <head>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div class="container">
            <div class="column">
                <h3>HOME</h3>
                <h2 class="score">0</h2>
                <div>
                    <button>+1</button>
                    <button>+2</button>
                    <button>+3</button>
                </div>
            </div>
            <div class="column">
                <h3>GUEST</h3>
            </div>
        </div>
    </body>
</html>

内容的提问来源于stack exchange，提问作者turner228