浮动元素本身无法水平居中，因其脱离文档流；有效方案包括：父容器设宽+margin: 0 auto、float+relative+calc()偏移、inline-block+text-align，或现代flex布局。
浮动本身无法真正实现水平居中，必须配合其他布局手段
单纯对 float: left 的菜单项使用 text-align: center 或 margin: 0 auto 是无效的——浮动元素已脱离文档流，margin: 0 auto 失效，父容器的 text-align 也只影响内联内容，不作用于浮动块。真正的居中需要“让父容器感知到子元素整体宽度”，或“用浮动+负边距”这类技巧性方案。
最稳妥的做法：浮动子项 + 父容器设宽 + 负 margin 居中
这是兼容 IE8+ 且逻辑清晰的方案，核心是让父容器（如 .nav）拥有明确宽度，并利用 margin-left: -Xpx 抵消自身一半宽度：
.nav {
width: 600px; /* 所有 li 总宽度 + 间距之和 */
margin: 0 auto; /* 先让容器居中 */
}
.nav ul {
list-style: none;
padding: 0;
}
.nav li {
float: left;
margin-right: 20px;
}
/* 关键：清除浮动并修正定位 */
.nav:after {
content: "";
display: table;
clear: both;
}
- 必须手动计算
.nav的width，比如 4 个li各 120px 宽 + 3 × 20px 间距 = 540px，再加点余量设为 600px -
margin: 0 auto作用在父容器上，不是ul或li - 务必用
:after清除浮动，否则父容器高度塌陷，无法居中
更现代但需注意兼容性的替代方案：inline-block + text-align
如果不需要支持 IE7 及更早版本，直接放弃浮动，改用 display: inline-block 更简洁可靠：
.nav {
text-align: center;
}
.nav ul {
list-style: none;
padding: 0;
margin: 0;
}
.nav li {
display: inline-block;
margin-right: 20px;
}
/* 防止 inline-block 间的空白符间隙 */
.nav ul {
font-size: 0;
}
.nav li {
font-size: 16px; /* 恢复文字大小 */
}
-
text-align: center对父容器生效，inline-block子项会自然居中 - 空白符间隙问题常见于 HTML 换行缩进，用
font-size: 0是最轻量解法 - IE8+ 支持良好，但 IE7 需要 hack（如
*display: inline; zoom: 1）
为什么现在不推荐纯浮动做导航栏居中
浮动本质是为图文环绕设计的，强行用于导航布局会带来一连串副作用：
立即学习“前端免费学习笔记（深入）”；
- 父容器高度塌陷是默认行为，每次都要手动清除，容易遗漏
- 响应式场景下，
width计算失效，负 margin 无法动态适配 - 与 Flexbox 或 Grid 并存时，浮动会干扰其他布局上下文，调试困难
- 移动端 touch 区域可能因浮动错位而变小，影响点击精度
除非维护遗留系统，否则优先考虑 display: flex（justify-content: center）或上面提到的 inline-block 方案。浮动居中是个“能跑通但不干净”的权宜之计，边界条件稍一变化就容易出问题。
