本文详解 flexbox 中导航栏无法完美水平居中的常见原因，重点指出 `align-self: flex-end` 对垂直对齐的干扰，并提供修正代码、布局逻辑说明及实用调试建议。
在使用 Flexbox 实现导航栏（
观察原始 CSS 可发现关键问题：
nav > a {
/* ... 其他样式 */
align-self: flex-end; /* ⚠️ 问题根源！ */
margin-bottom: 5px;
}align-self: flex-end 强制所有 链接在交叉轴（即垂直方向）上紧贴容器底部对齐。此时，即使 nav 容器设置了 align-items: center，该声明也会被子元素的 align-self 覆盖（后者优先级更高）。结果就是：链接文字整体下沉，Logo 因 margin-bottom: -70px 进一步上浮，导致视觉中心严重偏移，破坏整体居中感。
✅ 正确做法是统一控制交叉轴对齐方式：
nav {
display: flex;
justify-content: center; /* 水平居中 —— 保持不变 */
align-items: center; /* 垂直居中 —— 作为基准 */
height: 80px; /* 建议显式设定高度，避免高度塌陷影响对齐 */
}
nav > a {
text-decoration: none;
color: #0F0326;
text-transform: uppercase;
font-size: 20px;
align-self: center; /* ✅ 改为 center，尊重容器 align-items */
margin: 0 1rem; /* 推荐用左右 margin 统一间距，更可控 */
}
.Logo {
width: 100%;
max-width: 125px;
height: auto;
order: 3;
/* 移除负 margin 和 z-index 干预，改用 flex 布局自然定位 */
/* 如需 Logo 居中突出，可设 flex: 0 0 auto 并配合 margin */
}? 额外优化建议：
- 避免滥用 order 和负 margin：当前 order 值（1/2/3/4/5）与 DOM 顺序不一致，易引发维护困难；负 margin-bottom: -70px 属于“hack 式”定位，破坏布局可预测性。建议通过 flex-direction: column + align-items: center 或 Grid 实现更稳健的 Logo+导航组合。
-
检查父容器约束：确保
无 text-align: left、padding 不对称或 max-width 限制导致视觉偏移。 - 调试技巧：在浏览器 DevTools 中临时添加 nav { border: 1px solid red; } 和 nav > * { background: rgba(0,0,0,0.1); }，直观查看各元素实际占位与对齐基线。
总结：Flexbox 的居中是“容器控制 + 子项协作”的结果。justify-content 管水平，align-items 管垂直，而每个子项的 align-self 是最终裁决者。修复 align-self: flex-end 为 center，并移除破坏性定位声明，即可让导航栏真正回归视觉与逻辑的双重居中。
