此页面中的徽标元素未在<header>容器内垂直居中。在移动设备上的问题比台式机更明显。第二个元素（#forum-link）正确对齐。
flexbox align-items:center规则似乎适用于一个子div，但不适用于另一子div。为什么会这样，如何解决？
html {
max-width: 780px;
margin: 0 auto;
}
body {
background-image: url('https://img.freepik.com/free-vector/retro-styled-pattern-background_1048-6593.jpg');
background-size: 116px;
background-repeat: repeat-x;
}
header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
height:116px;
}
#logo {
margin-left: 15px;
}
#forum-link {
max-width: 110px;
margin-right: 35px;
}
#forum-link a {
color: white;
text-decoration: none;
font-weight: bold;
font-size: x-large;
}
@media only screen and (orientation: portrait) {
html {
margin: 0;
height: 100%;
}
body {
margin: 0;
height: 100%;
display: flex;
flex-flow: column;
}
header {
display: block;
width: 100%;
position: relative;
height: auto;
margin-bottom: 50px;
}
#logo {
margin: initial;
display: flex;
align-items: center;
justify-content: center;
}
#forum-link {
margin: initial;
max-width: initial;
background: #323232;
height: 27px;
position: absolute;
bottom: -50px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#forum-link a {
font-weight: bold;
font-size: .9em;
}
#forum-link a:hover {
text-decoration: underline;
}<body>
<header>
<div id="logo"><img src="http://placekitten.com/g/354/85" srcset="http://placekitten.com/g/354/85, http://placekitten.com/g/354/85 2x" width="354" height="85"></div>
<div id="forum-link"><a href="/forum">Join our Forums!</a></div>
</header>
</body>编辑：澄清了问题
最佳答案
嗯，我想这就是您所追求的：徽标和链接在bg上垂直居中？仅针对非移动解决方案进行了更新。
另外，正如我在评论中所说，此处出于全面性而重复：您的图像未垂直居中，因为它是其父代的高度：#logo和header。
链接的高度小于header的高度，因此它是垂直居中的。
如果您指的是5px左右的空格，只需在display: block的图像上抛出#logo即可删除该间距。虽然这仍然是父母的高度。
我的解决方案基本上是给您的身体一个高度，弯曲它，然后您的header垂直居中对齐。
html {
max-width: 780px;
margin: 0 auto;
}
body {
background-image: url('https://img.freepik.com/free-vector/retro-styled-pattern-background_1048-6593.jpg');
background-size: 116px;
background-repeat: repeat-x;
height: 116px;
margin: 0;
display: flex;
}
header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin-bottom: 0;
width: 100%;
}
#logo {
margin-left: 15px;
}
#logo img {
display: block;
}
#forum-link {
max-width: 110px;
margin-right: 35px;
}
#forum-link a {
color: white;
text-decoration: none;
font-weight: bold;
font-size: x-large;
}
@media only screen and (orientation: portrait) {
html {
margin: 0;
height: 100%;
}
body {
margin: 0;
height: 100%;
display: flex;
flex-flow: column;
}
header {
display: block;
width: 100%;
position: relative;
height: auto;
margin-bottom: 50px;
}
#logo {
margin: initial;
display: flex;
align-items: center;
justify-content: center;
}
#forum-link {
margin: initial;
max-width: initial;
background: #323232;
height: 27px;
position: absolute;
bottom: -50px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#forum-link a {
font-weight: bold;
font-size: .9em;
}
#forum-link a:hover {
text-decoration: underline;
}<body>
<header>
<div id="logo"><img src="http://placekitten.com/g/354/85" srcset="http://placekitten.com/g/354/85, http://placekitten.com/g/354/85 2x" width="354" height="85"></div>
<div id="forum-link"><a href="/forum">Join our Forums!</a></div>
</header>
</body>关于html - 为什么此徽标未在其父容器中垂直居中？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57763749/