text-align: center 必须作用于父容器，仅对行内或inline-block子元素有效；margin: 0 auto 对行内元素无效，且仅适用于定宽块级元素；Flex布局（justify-content: center）更可靠。
横向菜单里的 <a> 标签默认是行内元素，直接加 text-align: center 没用——它得作用在父容器上，而且得看父容器的布局类型。别试 margin: 0 auto，对行内元素无效。
给菜单容器设 text-align: center（适用于 inline / inline-block 子项）
这是最轻量、兼容性最好的做法，前提是菜单项本身是行内或行内块级元素（比如 <li> 里包 <a>，且 <li> 是 display: inline-block 或 <a> 自己设了 display: inline-block）。
- 父容器（如
<ul>或包裹菜单的<nav>）必须设text-align: center -
<li>或<a>要显式设display: inline-block（否则<li>默认是 block，会独占一行，text-align对它不生效） - 注意 HTML 中
<li>间的换行符/空格会被渲染成空格，导致菜单项间有间隙；可删空格、用注释、或设font-size: 0在父容器再重置子元素字体
<nav style="text-align: center;">
<ul style="list-style: none; padding: 0; margin: 0;">
<li style="display: inline-block; margin: 0 10px;"><a href="#">首页</a></li>
<li style="display: inline-block; margin: 0 10px;"><a href="#">关于</a></li>
</ul>
</nav>
用 Flex 布局让菜单整体居中（推荐现代项目）
Flex 不依赖文本对齐逻辑，控制力更强，尤其适合响应式菜单。关键是把菜单容器（<ul> 或 <nav>）设为 flex，并用 justify-content: center 居中子项。
- 父容器（如
<nav>）设display: flex+justify-content: center -
<ul>本身要取消默认 margin 和 padding，避免干扰 -
<li>默认是 block，但在 flex 容器里会变成 flex item，无需改display；但要去掉list-style避免圆点 - 如果菜单高度需撑满或垂直居中，加
align-items: center
<nav style="display: flex; justify-content: center;">
<ul style="display: flex; list-style: none; margin: 0; padding: 0;">
<li style="margin: 0 15px;"><a href="#">首页</a></li>
<li style="margin: 0 15px;"><a href="#">产品</a></li>
</ul>
</nav>
为什么 margin: 0 auto 在菜单里不管用？
因为 margin: 0 auto 只对「块级且有明确宽度」的元素生效。横向菜单里的 <a> 是行内元素，默认 width 是内容宽度，无法自动分配左右 margin；即使强行设 display: block，每个链接也会独占一行，破坏横向结构。
立即学习“前端免费学习笔记（深入）”；
- 试图给每个
<a>加margin: 0 auto：无效，行内元素 ignoreautomargin - 给
<ul>加margin: 0 auto：只有当<ul>是 block 且设了width才会水平居中——但它居中的是整个菜单条，不是里面的链接；而且菜单宽度难预估，不响应式 - 常见误操作：在
<a>上写text-align: center——没意义，text-align是控制子内容对齐，<a>里通常只有文字，文字本来就居左对齐，加了也看不出变化
真正容易被忽略的点是：居中对象到底是谁？是单个链接的文字？是所有链接组成的菜单条？还是整个导航区域？选错目标，就等于在跟 CSS 盒模型硬碰硬。尤其是老项目混用 inline-block 和 float 时，text-align 和 margin 的行为边界特别模糊——这时候直接切到 Flex，反而省调试时间。
