本文详解 flexbox 中导航栏水平与垂直居中失效的常见原因，重点指出 `align-self: flex-end` 导致的垂直偏移问题，并提供可立即生效的修复方案及最佳实践。
在使用 Flexbox 布局导航栏（<nav>）时，许多开发者会误以为只要对容器设置 justify-content: center 就能实现“完美居中”，却忽略了子元素自身的对齐行为可能覆盖容器级设置。从你提供的代码和截图可见：导航项整体看似水平居中，但实际在垂直方向明显下移——这正是 nav > a { align-self: flex-end } 所致。
align-self 属性具有高优先级，它会覆盖父容器 nav 的 align-items: center 设置。当所有 <a> 标签被强制对齐到交叉轴（即垂直方向）末端时，它们便集体下沉，导致视觉上“未居中”。
✅ 正确做法是：
- 移除或重置子项的 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 控制导航项间距，语义更清晰且避免首尾额外空白；
- 为 <nav> 添加 flex-wrap: nowrap（默认值，但显式声明可增强可读性）；
- 在开发阶段启用浏览器 DevTools 的 Flexbox 可视化调试（Chrome/Edge 支持勾选“Flexbox overlay”），直观查看主轴/交叉轴对齐状态。
修复后，你的导航栏将在水平与垂直两个维度均精准居中，且具备良好可维护性与响应适应性。
