导航栏居中失效的主因是父容器未设display: flex；需确保nav等外层容器启用Flex布局，设置height并避免text-align干扰，li/a统一重置样式。
导航栏容器没设 display: flex
这是最常见原因：父容器（比如 <nav></nav> 或 <header></header>）没开启 Flex 布局，justify-content 和 align-items 就不会生效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确认导航栏外层容器已加
display: flex - 如果用了
<ul></ul>作为导航列表，它默认是块级元素，但它的父容器（比如<nav></nav>）才需要设为flex - 避免在错误层级写居中样式——比如只给
<ul></ul>加justify-content: center，却不给它的父容器设display: flex
justify-content: center 没起作用？检查是否被 text-align 干扰
text-align: center 对 flex 子项无效，但它会干扰内联元素（如未设 display: block 的 <a></a>）的对齐表现，尤其当导航项是内联默认行为时。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保导航项（
<li>或<a></a>）没有意外继承或设置text-align - 若用
<li>包裹<a></a>，推荐统一设list-style: none和margin: 0; padding: 0，再让<li>成为 flex 子项 - 不依赖
text-align实现水平居中，flex 的justify-content更可靠
垂直居中失效？确认容器有明确高度且子项未换行
Flex 的 align-items: center 要求容器有可计算的高度（比如 height: 60px），否则可能“塌陷”，看起来没垂直居中。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给导航栏容器（如
<nav></nav>）设固定高度，例如height: 60px或min-height: 60px - 避免子项内容过多导致换行（
flex-wrap: wrap会破坏垂直居中效果），必要时加flex-wrap: nowrap - 检查是否有 margin/padding/line-height 导致视觉偏移——真实居中了，但文字因行高显得偏上
nav {
display: flex;
justify-content: center;
align-items: center;
height: 60px;
background: #333;
}
nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
nav li {
margin: 0 12px;
}
nav a {
text-decoration: none;
color: white;
padding: 8px 16px;
}
父容器高度不可见、子项未脱离文档流、flex 属性写在错误选择器上——这三个点最容易被忽略。 
