最直接的导航菜单水平居中方法是父容器设 text-align: center，ul 设 display: inline-block；更推荐 flex 方案：父容器或 ul 设 display: flex 与 justify-content: center，无需处理空格或宽度。
用 text-align: center 配合内联元素最简单
导航菜单水平居中，最直接的办法不是给 <ul> 自己设 margin: 0 auto，而是把它当成行内内容来处理。因为 <ul> 默认是块级元素，margin: 0 auto 对它生效的前提是它有明确宽度且不浮动——但多数导航不需要固定宽，硬设反而僵化。
更稳妥的做法是把父容器（比如 <nav> 或 <header>）设为 text-align: center，再让 <ul> 变成 display: inline-block：
<nav>
<ul style="display: inline-block; margin: 0; padding: 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>
注意：子 <li> 必须也设 display: inline-block（不能只靠 float: left），否则换行空格会被渲染成实际间隙；如果不想手动调 margin 控制间距，可以用 font-size: 0 在父 <ul> 上消除空格，再在 <li> 里重设字体大小。
Flexbox 方案更现代、更可控
如果你的项目支持 IE10+，display: flex 是目前最推荐的方式。它天然规避了内联元素的空格问题，也无需计算宽度或处理浮动清除。
立即学习“前端免费学习笔记（深入）”；
关键点在于：父容器（如 <nav> 或 <ul>）设 display: flex 和 justify-content: center，子项保持默认 display: block 即可：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
<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>
-
<ul>本身设display: flex更常见，这样<li>不需要额外样式就能水平排列 - 记得清除
<ul>默认的padding-left，否则左侧会留白 - 若需响应式折叠，
flex比inline-block更容易配合@media和flex-wrap
避免踩 margin: 0 auto 的坑
很多人第一反应是给 <ul> 写 margin: 0 auto，但它常失效，原因很具体：
-
<ul>是块级元素，但没有设置width—— 浏览器按内容撑开，auto水平外边距无法计算 - 如果
<ul>里用了float: left，它就脱离文档流，margin: 0 auto彻底无效 - 即使加了
width: fit-content，IE 不支持，Safari 旧版本对fit-content渲染不稳定
所以除非你明确控制菜单总宽度（比如固定为 600px），否则别依赖这个方案。真要这么做，得同时写：width: fit-content; margin: 0 auto;，并在父容器加 text-align: center 兜底。
移动端适配时，flex 的 flex-wrap 很关键
水平导航在小屏上容易溢出。用 flex 时，别忘了考虑折行：
- 默认
flex-wrap: nowrap，超宽就横向滚动或隐藏，体验差 - 加
flex-wrap: wrap后，justify-content: center依然有效，但多行时每行独立居中 - 如果希望所有项始终单行，改用
overflow-x: auto+white-space: nowrap更可靠
另外，<a> 标签的点击热区在移动设备上至少要保证 44px × 44px，光靠文字 padding 不够，建议用 min-height 或 line-height 显式撑高。
真正麻烦的不是居中本身，而是居中之后在不同视口宽度下是否还能保持可读、可点、不换行错位——这些细节比居中代码本身更消耗调试时间。
