CSS Flexbox响应式汉堡导航栏的垂直居中对齐问题

问题原因 #

• 移动端导航菜单设置了top: 90px和height: 100vh，菜单总高度等于视口高度加上顶部偏移的90px，超出了可视区域范围。justify-content: center是在菜单自身的100vh高度内居中，导致整体可视位置偏下，没有在视口内垂直居中。
• 桌面端给.navlinks设置的line-height: 90px属性被子元素继承，移动端菜单项行高过大，也会干扰对齐效果。

修复方案 #

修改响应式断点内.navlinks的样式，调整高度并重置行高即可：

@media (max-width: 800px) {
  .navlinks {
    position: fixed;
    top: 90px;
    width: 100%;
    /* 把高度改成视口高度减去顶部导航栏的高度，避免超出视口 */
    height: calc(100vh - 90px);
    transition: all 0.5s;
    right: -100%;
    background: #222831;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    /* 重置继承的行高，避免菜单项行高过大 */
    line-height: normal;
  }
  /* 其余原有样式保持不变 */
}

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