本文解析 flexbox 导航栏水平居中正常但垂直居中失效的根本原因——错误使用 `align-self: flex-end` 覆盖了父容器的 `align-items: center`，并提供完整、可复用的修复方案及最佳实践。
在使用 Flexbox 实现导航栏（<nav>）居中布局时，许多开发者会发现：水平居中（justify-content: center）生效了，但元素却“沉”在容器底部，未真正垂直居中。正如问题截图所示，导航链接整体下移，Logo 甚至因负 margin-bottom 和 z-index 叠加而进一步加剧视觉偏移。
根本原因在于这一行 CSS：
nav > a {
/* ... 其他样式 */
align-self: flex-end; /* ⚠️ 关键问题！ */
}虽然 <nav> 设置了 align-items: center，但子元素 <a> 显式声明了 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 原生属性）：
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 对齐逻辑。建议将其设为绝对定位或单独封装为标题区域（如 <div class="logo-wrapper">），避免参与导航项的 Flex 排列流。
-
重置默认样式：确保 <nav> 和 <header> 无意外的 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。调试时善用浏览器开发者工具检查盒模型与计算样式，快速定位偏离根源。
