如何使用 Flexbox 正确居中导航栏（Nav）

本文详解 flexbox 中导航栏水平与垂直居中失效的常见原因，重点指出 `align-self: flex-end` 导致的垂直偏移问题，并提供可立即生效的修复方案及最佳实践。

在使用 Flexbox 布局导航栏（

align-self 属性具有高优先级，它会覆盖父容器 nav 的 align-items: center 设置。当所有 标签被强制对齐到交叉轴（即垂直方向）末端时，它们便集体下沉，导致视觉上“未居中”。

✅ 正确做法是：

• 移除或重置子项的 align-self，让其继承 nav 的 align-items: center；
• 同时确保无其他干扰因素（如图片 margin-bottom: -70px、负定位或 z-index 引发的层叠错位）。

以下是优化后的关键 CSS 片段：

nav {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中（需子项不覆盖此值） */
  height: 80px;            /* 推荐显式设定高度，确保垂直居中有参照 */
  padding: 0 1rem;
}

nav > a {
  text-decoration: none;
  color: #0F0326;
  text-transform: uppercase;
  font-size: 20px;
  margin: 0 1rem;          /* 统一左右间距，替代分散的 margin-left/right */
  align-self: center;      /* ✅ 显式设为 center，避免继承不确定值 */
}

.Logo {
  width: 100%;
  max-width: 125px;
  height: auto;
  order: 3;
  /* ⚠️ 移除 margin-bottom: -70px 和 z-index */
  /* 负边距会破坏 flex 布局基线，应改用 transform 或调整结构 */
}

⚠️ 特别注意 Logo 的处理：
当前 .Logo 使用 margin-bottom: -70px 强行上提，不仅破坏 Flex 布局的自然流，还会干扰 align-items: center 的计算基准（Flex 容器以子项的内容盒边界为对齐参考）。更健壮的方案是：

• 若需 Logo 上浮效果，改用 transform: translateY(-20px)（不影响布局流）；
• 或将 Logo 单独置于 header 中，与 nav 并列，再通过嵌套 Flex 实现组合居中。

? 进阶建议：

• 使用 gap: 1rem 替代手动 margin 控制导航项间距，语义更清晰且避免首尾额外空白；
• 为
• 在开发阶段启用浏览器 DevTools 的 Flexbox 可视化调试（Chrome/Edge 支持勾选“Flexbox overlay”），直观查看主轴/交叉轴对齐状态。

修复后，你的导航栏将在水平与垂直两个维度均精准居中，且具备良好可维护性与响应适应性。