浮动的 li 无法直接居中，需通过父容器控制；推荐用 inline-block + text-align: center，或直接使用 Flexbox。
浮动的 li 本身无法直接居中，因为 float 会让元素脱离文档流、失去块级上下文，margin: 0 auto 对它无效。真正要居中的不是单个 li，而是整个浮动组——必须通过控制其父容器（如 ul）的位置或显示行为来实现。
用 inline-block 替代 float 是最稳的解法
把 li 改为 display: inline-block，再让父容器 text-align: center，就能自然居中。这规避了浮动带来的高度塌陷、清除浮动、父容器宽度不可知等一堆副作用。
-
ul上设text-align: center，这是居中的触发点 -
li设display: inline-block（不是inline，否则无法设宽高/内外边距） - 加
font-size: 0到ul消除inline-block间的空白间隙；子元素再单独设font-size - IE6/7 需补
*display: inline; zoom: 1触发 hasLayout
float 未移除时强行居中：靠 position: relative 偏移
如果因历史代码不能动 float: left，可用相对定位模拟居中。原理是让 ul 向右偏移 50%，再让每个 li 向左偏移 50%，抵消后整体视觉居中。但需注意：这个“50%”是相对于父容器宽度计算的，若父容器没设宽，结果会飘忽。
-
ul加position: relative; left: 50% -
li加position: relative; right: 50%（注意是right，方向相反） - 必须确保
ul的父容器有明确宽度或text-align: center配合，否则偏移基准不稳 - 在 Flexbox 普及的今天，这种写法仅用于兼容老项目，调试成本高且易错位
为什么不用 margin: 0 auto 直接套在 ul 上？
因为 ul 默认是块级元素，margin: 0 auto 起效的前提是它有**明确宽度**。而一旦里面全是 float 的 li，ul 高度会塌陷，宽度也变成“包裹内容”，不再是撑满父容器的块——此时 margin: 0 auto 实际上没生效，只是看起来像居中了（其实是父容器默认左对齐 + ul 自身窄导致的巧合）。
- 若硬要这么用，得先给
ul手动设width（比如width: 400px），再加margin: 0 auto - 但宽度难预估：每项文字长度不同、padding/margin 不一、响应式下更不可控
- 还得额外清除浮动（比如
overflow: hidden或伪元素::after），否则ul高度为 0，布局全乱
真正容易被忽略的点是：居中目标必须明确——你要居中的是“浮动行为下的视觉组”，而不是“浮动这个动作本身”。只要接受 float 已过时的事实，转向 inline-block 或直接用 display: flex，问题就从“绕弯调试”变成“一行声明搞定”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
