导航栏水平居中需先使ul收缩为内容宽度，再配合text-align:center（inline-block）、margin:0 auto（table）或justify-content:center（flex）；浮动会导致父容器塌陷使text-align失效，应避免混用float与居中方案。
导航栏水平居中不是“加个 text-align: center 就完事”，关键得看它用什么方式排列子项、容器是否脱离文档流、宽度是否可控——错一步，margin: auto 失效、text-align 不起作用、flex 被浮动干扰，全都会白搭。
ul 默认撑满父容器，margin: auto 无效怎么办
很多初学者直接给 <ul></ul> 写 margin: 0 auto，发现完全不居中。根本原因是：<ul></ul> 是块级元素，默认宽度 100%，auto 左右外边距没空间可分。
- 必须先让
<ul></ul>收缩为内容宽度，方法有三：display: inline-block、display: table或display: flex -
display: inline-block需配合父容器text-align: center；display: table可单独用margin: 0 auto，无需父容器干预 - 若父容器是
<nav></nav>，直接设nav { text-align: center }+ul { display: inline-block }最稳妥，兼容性好且语义清晰
用了 float: left 的 <li>，text-align: center 失效
这是最常踩的坑：给每个 <li> 加 float: left 后，它们脱离文档流，父 <ul></ul> 高度塌陷，text-align 对浮动子项完全无效。
- 立刻删掉所有
float: left，改用display: inline-block或display: flex - 如果坚持用浮动，必须清除浮动（如
ul::after伪元素 +clear: both），但此时仍需额外包裹层或定位技巧才能居中，得不偿失 - 现代写法推荐直接上
ul { display: flex; justify-content: center }，<li>不用任何浮动或 inline 设置
响应式场景下桌面端居中、移动端堆叠，怎么不冲突
桌面端要整体居中，移动端却要垂直堆叠且按钮右对齐——不能只靠一个 text-align 切换，得用媒体查询分层控制。
- 桌面端：
nav { display: flex; justify-content: center }，ul { display: flex }，li { margin: 0 8px } - 移动端（
@media (max-width: 768px)）：nav { flex-direction: column; align-items: flex-end }，ul { flex-direction: column; align-items: center } - 注意：不要用
.topnav a:not(:first-child) { display: none }这类选择器隐藏菜单项，它会让首项永远可见，违背“仅展开时显示全部”的逻辑
display: flex 居中时，为什么 <li> 间距不均或换行
常见现象：加了 justify-content: center，但菜单项看起来挤在左边，或者小屏下突然折行——往往是因为没处理 flex-wrap 和 min-width。
-
ul { flex-wrap: nowrap }强制单行，避免意外折行；搭配overflow-x: auto可横向滚动（适合超多菜单项） - 给
<a></a>设white-space: nowrap，防止文字内换行撑开<li> - 若想等宽分布，不用
justify-content: center，改用justify-content: space-around或给每个<li>设flex: 1，但要注意最小宽度限制
真正难的不是写对某一行 CSS，而是理解每种布局模式下“谁在控制宽度、谁在脱离流、谁在继承对齐”——float 和 inline-block 混用、flex 容器里塞 position: absolute 元素、text-align 父容器里嵌套块级子项……这些组合才是实际项目里居中失败的根源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
