用 margin-inline: auto 实现 ol 居中需显式设置 width（如 fit-content），并清除默认 padding/margin；text-align: center 无效，因序号由 ::marker 生成且不属文本流；flex 容器中须用 justify-content: center 并重置 ol 内边距。
ol 列表整体居中，不是调 text-align 或改 list-style-position 就能解决的——它本质是块级元素居中问题，但默认样式会干扰结果。
用 margin-inline: auto 最简可靠
这是现代标准做法，语义清晰、兼容性好（Chrome 69+、Firefox 63+、Safari 12.1+、Edge 79+），且不破坏列表语义。
- 必须给
ol显式设置宽度，如width: fit-content（推荐）、width: 50%或固定值（400px） - 加
margin-inline: auto后，浏览器会在左右分配相等外边距 - 若父容器是
flex或grid，该方式会被覆盖，此时应改用父容器的justify-content: center - 别写
margin: 0 auto然后忽略宽度——没width或max-width，auto就失效
为什么 text-align: center 不行
text-align: center 只影响行内内容对齐，而 ol 的序号由 ::marker 生成，不属于文本流；它不会把整个列表“推到中间”，反而可能让文字居中、序号错位、第二行缩进异常。
- 常见错误现象：
ol写了text-align: center，结果序号飘在左边，文字挤在右边，多行时第二行顶到序号下方 - 即使配合
list-style-position: inside，也因基线计算不可控，尤其在自定义字体或line-height下极易偏移 - 真正需要文字居中时，应重置默认样式 + 用
li::before自定义编号，再统一控制
Flex 布局居中需先清空默认边距
若你用 display: flex 包裹 ol 并设 justify-content: center，ol 默认的 padding-inline-start（Chrome 是 40px，Firefox 是 2.5em）会导致视觉偏移，看起来“居中但又没完全居中”。
- 必须显式重置：
ol { padding: 0; margin: 0; } - 若保留项目符号，建议加
list-style: none+li::marker或li::before控制，避免list-style-position引发的换行错位 - 注意：Safari ≤16.4 不支持
li::marker，生产环境优先用li::before+counter(list-item)
最容易被忽略的是：居中失效往往不是因为没写 margin: auto，而是忘了清 ol 自带的 padding 和 margin，或者在 Flex 容器里误以为 justify-content 能自动修正所有偏移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
