必须对导航菜单的父容器（如<nav>或<ul>）设置display: flex才能使justify-content: center生效；常见错误是直接给<li>或未设flex的元素应用该属性，且需重置默认padding、margin及处理flex-wrap影响。
导航菜单容器必须设为 flex 布局
只对 <ul> 或 <nav> 元素写 justify-content: center 是无效的，它只在 flex 容器上起作用。必须先用 display: flex 激活该容器的 flex 上下文。
- 常见错误：给
<li>加justify-content——<li>默认不是 flex 容器 - 正确做法：对包裹整个菜单的父元素（如
<ul>、<nav>或<div class="menu">）设置display: flex - 如果菜单项是内联元素（比如用
<span>写的），也要确保它们的父容器是 flex 容器，否则justify-content不生效
避免子项换行导致居中失效
默认情况下，flex 容器的 flex-wrap 是 nowrap，但如果菜单项太多或容器太窄，内容可能溢出或被压缩。此时若没处理好，justify-content: center 看起来“没反应”。
- 检查是否意外设置了
flex-wrap: wrap，且子项折行后第一行不满，造成视觉偏移 - 必要时加
flex-wrap: nowrap强制单行，或配合width: fit-content+margin: 0 auto作为备选方案 - 移动端需注意：视口缩小时，
justify-content: center仍有效，但文字可能重叠，建议搭配white-space: nowrap或响应式断点
注意 margin 和 padding 对齐的影响
即使 flex 居中逻辑正确，外边距和内边距也可能让视觉中心偏移。
-
<ul>默认有浏览器内置的padding-left（通常是 40px），会把整个菜单往右推 —— 必须重置：padding: 0 - 父容器（如
<header>）若有左右padding，会影响可用宽度，间接影响居中效果 - 个别菜单项设置了
margin-right或margin-left，尤其最后一个<li>的多余margin，会导致整体宽度计算偏差
nav {
display: flex;
justify-content: center;
}
nav ul {
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
nav li {
margin: 0 1rem;
}
flex 居中本身很简单，真正卡住人的往往是那些看不见的默认样式和隐式布局行为。动手前先用浏览器开发者工具高亮盒模型，确认「谁在居中」「谁的宽高是多少」「有没有隐藏的 padding/margin」—— 这比反复调 justify-content 更快定位问题。
立即学习“前端免费学习笔记（深入）”；
