ul容器居中需设width+margin-inline:auto，text-align:center会导致项目符号偏左；必须显式设置width（推荐fit-content）且ul为块级元素。
ul 容器居中必须设 width + margin-inline: auto
直接给 ul 加 text-align: center 会导致项目符号偏左、文字居中，视觉错位——这不是你想要的“列表居中但文字左对齐”。真正起作用的是让整个 ul 块自身水平居中，而不是内部内容对齐。
关键条件有两个：width 必须显式设置（否则 margin-inline: auto 失效），且 ul 得是块级元素（默认就是）。推荐用 width: fit-content，它自动收缩到列表内容宽度，不用预估像素值。
-
width: fit-content兼容 Chrome 69+、Firefox 63+、Safari 12.1+、Edge 79+ - 若需兼容老 Safari（width: max-content 或固定值如
width: 320px - 绝对别漏掉
margin-inline: auto，它是居中的核心声明，等价于margin-left: auto; margin-right: auto;
li 内部文字左对齐要靠 text-align: left 显式控制
即使 ul 居中了，li 默认继承父级 text-align。如果父容器（比如 body）设了 text-align: center，li 里的文字也会被拉到中间——这会破坏“左对齐”效果。
所以必须在 li 上单独写 text-align: left，而且建议显式声明，不依赖默认行为。顺带一提，list-style-position: inside 也得加上，否则 padding 或 border 可能把项目符号切掉。
-
ul li { text-align: left; }是刚性要求，不能省 -
list-style-position: inside在加了padding或border时尤其重要 - 如果
li里有a标签，记得加color: inherit和text-decoration: none，避免链接样式干扰对齐观感
Flex 布局不是万能解，慎用于 ul/li 结构
有人想用 display: flex 在 ul 上实现居中，这反而会破坏语义和默认列表流：flex 把每个 li 当作 flex item，list-style 可能消失，换行逻辑异常，甚至影响屏幕阅读器识别。
真正该用 flex 的地方是「让 ul 在其父容器中居中」——也就是把 flex 加在 ul 的父级上，而不是 ul 自身。这样既保持列表结构完整，又达成容器级居中。
- ✅ 正确：父容器设
display: flex; justify-content: center;，ul保持原样 - ❌ 错误：给
ul加display: flex，会丢项目符号、乱缩进、伤可访问性 - 若父容器高度可控（如全屏），加
align-items: center可同时垂直居中整个列表
常见翻车点：inline-block + text-align:center 组合
把 ul 设成 display: inline-block 再配父容器 text-align: center 看似可行，但极易因 HTML 换行符生成空白节点，导致列表偏左几像素；更麻烦的是，vertical-align 缺省值（baseline）会让它和旁边文本不对齐。
这个方案调试成本高、行为不稳定，现代项目里基本没优势。除非你在维护一个无法改结构的老系统，否则优先选 width + margin-inline: auto 或父容器 flex。
- 空白符问题需要额外加
font-size: 0在父容器，再重置li的font-size，太绕 -
vertical-align: top能缓解对齐问题，但只是补丁，不是根治 - 这种写法在响应式场景下容易因宽度变化导致居中漂移
最稳的路径就两条：要么 ul 自身用 width: fit-content + margin-inline: auto，要么把它放进一个 flex 容器里居中。其余所有“曲线救国”的方式，都在为后续维护埋坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
