ul整体居中需用margin: 0 auto并设明确宽度，因text-align: center会连同项目符号一起居中而破坏语义；项目符号是::marker伪元素，属行内内容，无法单独控制，故应通过容器居中而非文本对齐。
无序列表 ul 整体居中，但项目符号（bullets）和文字仍保持左对齐，这是常见需求；直接给 ul 加 text-align: center 会让项目符号也跑偏，必须拆开处理。
为什么 text-align: center 会让项目符号错位
因为 text-align 作用于行内内容，ul 的项目符号是伪元素（::marker），默认和 li 文本一起被当作行内内容居中。结果就是点和文字都挤到中间，失去列表语义和可读性。
- 项目符号不是独立 DOM 节点，无法单独选中或重定位
-
text-align: center在ul上会把整行（含 bullet + text）当一个块来居中 - 老浏览器不支持
list-style-position: inside或::marker控制，更得靠结构隔离
用 margin: 0 auto 居中 ul 容器本身
这是最稳妥、兼容性最好的做法：让整个 ul 块级元素在父容器中水平居中，内部 li 保持默认左对齐，项目符号自然贴左。
- 必须给
ul设置明确宽度（如width: 320px或max-width: 80%） -
ul默认是display: block，无需额外声明 - 父容器不能是
display: flex或display: grid，否则margin: auto失效 - 避免把
ul包在div里再设text-align: center—— 这等于又绕回错误路径
ul {
width: 300px;
margin: 0 auto;
}
用 Flex 布局居中，但保留 li 左对齐
如果父容器已经是 Flex，或者你主动用 Flex，那就要小心：直接对 ul 设 justify-content: center 没用（ul 是单个子项），真正要操作的是父容器，且不能影响 li 内部排版。
- 在
ul的直接父元素上设display: flex和justify-content: center -
ul本身保持默认display: block，它的子项li不受 Flex 影响 - 不要给
ul加display: flex，否则li变成 flex item，项目符号可能消失或错位 - Safari 旧版本需加
-webkit-justify-content: center
别碰 list-style-position: inside 来“修复”居中
这个属性只是把项目符号挪进文本盒子里，不解决居中问题，反而容易导致换行错乱、缩进不一致，尤其在多行 li 中表现不可控。
-
list-style-position: inside让 bullet 成为文本流一部分，text-align: center会把它拉到中间 - 不同浏览器对
inside的缩进计算不一致，移动端尤其容易崩 - 无障碍阅读器可能误读 bullet 位置，影响屏幕朗读逻辑
- 真正需要 bullet 和文本分离控制时，应改用自定义
::marker+padding-left组合，而非依赖inside
项目符号的对齐本质是语义问题——它属于每个 li 的起始标记，不是装饰。居中动作只该作用于容器层级，不该侵入列表项内部结构。一旦开始调 marker 或硬塞 padding，就说明 HTML 结构或 CSS 策略已经偏离了原生语义轨道。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
