这是相关代码。我需要在绿色区域（.menu-box）中垂直对齐导航菜单。我似乎只能将其水平居中。我缺少什么？ （我尝试了vertical-align: middle;但没有效果。我尝试了display:和flex-flow:的各种组合，但没有找到有效的组合。
<!doctype html>
<html>
<head>
<style>
.header-box {
flex-flow: column wrap;
display: inline-flex;
background-color: beige;
width: 100%;
height: 100px;
column-gap: 0px;
}
.logo-box {
background-color: pink;
height: 100%;
width: 25%;
align-content: flex-start;
min-width: 85px;
}
.logo-box p {
flex-flow: column nowrap;
font-size: 23px;
}
.menu-box {
background-color: green;
width: 50%;
height: 100%;
text-align: center;
}
.menu-box nav {
font-size: 23px;
background-color: yellow;
}
.dummy-box {
background-color: red;
width: 25%;
height: 100%;
}
</style>
</head>
<body>
<span class="header-box">
<span class="logo-box">
</span>
<span class="menu-box">
<nav>
<a href="/html/">Home</a> |
<a href="/css/">Menu</a> |
<a href="/js/">Gallery</a> |
<a href="/python/">About</a>
</nav>
</span>
<span class="dummy-box">
</span>
</span>
</body></html>