本文解析 flexbox 导航栏水平居中正常但垂直居中失效的根本原因——错误使用 `align-self: flex-end` 覆盖了父容器的 `align-items: center`，并提供完整、可复用的修复方案及最佳实践。

在使用 Flexbox 实现导航栏（

）居中布局时，许多开发者会发现：水平居中（justify-content: center）生效了，但元素却“沉”在容器底部，未真正垂直居中。正如问题截图所示，导航链接整体下移，Logo 甚至因负 margin-bottom 和 z-index 叠加而进一步加剧视觉偏移。

根本原因在于这一行 CSS：

nav > a {
  /* ... 其他样式 */
  align-self: flex-end; /* ⚠️ 关键问题！ */
}

虽然

设置了 align-items: center，但子元素 显式声明了 align-self: flex-end —— 这会完全覆盖父级的对齐指令，强制所有链接沿交叉轴（即垂直方向）底部对齐，导致整体脱离居中基准线。

✅ 正确做法是移除或重置该声明：

nav > a {
  text-decoration: none;
  color: #0F0326;
  text-transform: uppercase;
  font-size: 20px;
  /* 删除 align-self: flex-end; */
  /* 改为显式继承父级居中行为（可选，非必需） */
  align-self: center; /* ✅ 推荐明确写出，增强可读性 */
  margin-bottom: 5px; /* 注意：此值仍可能干扰垂直居中，见下方说明 */
}

⚠️ 额外注意事项：

• 避免混用 margin-bottom 与垂直居中：当前 .nav > a 的 margin-bottom: 5px 会在每个链接下方添加空白，累积后拉低整体视觉重心。若需统一间距，推荐改用 gap（Flexbox 原生属性）：

  

  page-agent 浏览器控制（CDP）

  使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

  下载

  nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem; /* 替代分散的 margin-right/margin-left */
  }

  并同步清理所有 .nav_1–.nav_4 中的 margin-left/margin-right。

• Logo 定位需独立处理：.Logo 使用 order: 3 和 margin-bottom: -70px 属于“hack 式布局”，易破坏 Flex 对齐逻辑。建议将其设为绝对定位或单独封装为标题区域（如

  ），避免参与导航项的 Flex 排列流。

• 重置默认样式：确保

  和

  无意外的 padding、border 或 line-height 干扰高度计算。可临时添加：

  nav, header {
    padding: 0;
    margin: 0;
    height: 60px; /* 设定明确高度便于调试 */
    border: 1px solid red; /* 可视化容器边界 */
  }

✅ 最终精简、健壮的 CSS 示例：

nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem; /* 统一间距 */
  height: 60px;
}

nav > a {
  text-decoration: none;
  color: #0F0326;
  text-transform: uppercase;
  font-size: 20px;
  align-self: center; /* 显式居中，语义清晰 */
}

.Logo {
  width: 125px;
  height: auto;
  /* 移除 order / negative margin / z-index，改用语义化结构 */
}

总结：Flexbox 垂直居中失效，90% 源于子元素 align-self 的误覆盖或外边距干扰。牢记原则——父容器控制主轴/交叉轴对齐，子元素仅在必要时微调；避免用 margin 模拟布局间距，优先使用 gap。调试时善用浏览器开发者工具检查盒模型与计算样式，快速定位偏离根源。