Html 将段落垂直居中

我有一个问题，我不能垂直对齐我的文本，我试图搜索，我没有找到任何解决我的问题的办法

我正在尝试制作一个导航，你可以将其悬停在上面，它将通过一个过渡来放大导航高度，但是我在这个Div中的文本将无法垂直居中

这是我的css

.nav-links-typo {
    font-size: 17px;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
}
.nav-bar {
    position: fixed;
    height: 3%;
    width: 100%;
    max-height: 100%;
    max-width: 100%;
    background-color: coral;
    transition: 1.2s;
}
.nav-bar:hover {
    height: 5%;
    transition: 1.2s;
}
.nav-links-block {
    min-height: 100%;
    width: 10%;
    margin-left: 5%;
    background-color: lightgray;
    display: inline-table;
    text-align: center;
}

这是我的html

<div class="nav-bar">

    <div class="nav-links-block-platzhalter"></div>

    <div class="nav-links-block">

        <a class="nav-links-typo">Startseite</a>

    </div>

    <div class="nav-links-block">

        <a class="nav-links-typo">Rest API Console</a>

    </div>

    <div class="nav-links-block">

        <a class="nav-links-typo">Grafana</a>

    </div>



</div>

硅钙石
RESTAPI控制台
格拉凡纳

我自己想出来了： 我将在顶部和底部添加填充物，而不是设置高度

.nav-bar:hover {
    padding-top: 1%;
    padding-bottom: 1%;
    transition: 1.2s;
}

我把你的代码放在a中，但我仍然不清楚你想要实现什么。@BogdanC问题是，如果我将鼠标悬停在div“导航栏”上，“导航链接打字错误”中的文本将保持在相同的位置。但我知道我该怎么解决了，看看我的答案：）但是谢谢