列表居中需分清目标：整体居中用text-align: center+inline-block或Flex；单个li内文字居中用text-align: center；Flex更可控，支持换行与垂直居中。
ul 或 ol 的列表项整体居中
列表项（li）本身不能直接居中，真正要操作的是包裹它们的 ul 或 ol 容器。浏览器默认给 ul/ol 设置了左外边距（margin-left），所以看起来靠左——这不是 li 的问题，是容器没居中。
最稳妥的做法是给列表容器设置 text-align: center，再配合 display: inline-block 防止宽度占满整行导致文字换行错乱：
ul {
text-align: center;
}
ul li {
display: inline-block;
}注意：如果 li 内有块级元素（比如 div 或 p），inline-block 会让它们挤在同一行，此时需额外处理子内容对齐，或改用 Flex 布局。
用 Flex 实现垂直+水平居中（含多行列表）
当列表项需要换行、且每行都居中，或者还要垂直居中（比如在卡片里），flex 是更可控的选择。关键点在于：必须对 ul 设置 display: flex，并用 flex-wrap: wrap 允许折行，再用 justify-content: center 水平居中：
立即学习“前端免费学习笔记（深入）”；
ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
list-style: none;
padding: 0;
}
ul li {
margin: 4px; /* 控制项间距 */
}常见坑：ul 默认有 padding-left，不重置会导致整体偏移；li 默认是块级，若未设 margin 或 gap，项之间会紧贴。
单个 li 内部文字居中（不是整个列表）
如果只是想让每个 li 里的文字居中，而不是调整列表结构，那就直接对 li 设 text-align: center：
ul li {
text-align: center;
}但要注意：这个只影响 li 内联内容（如文字、span）的对齐；如果 li 里有 div 且设了 width 和 margin: 0 auto，那它仍会按块级规则居中，和 text-align 无关。
避免用 text-align 居中后出现意外换行
text-align: center + display: inline-block 组合下，li 间的空白符（换行、空格）会被渲染成空格，可能导致最后一项被挤到下一行。解决方法有二：
- 把 HTML 中
li标签写在同一行：<li>1</li> <li>2</li> <li>3</li> - 或在 CSS 中给
ul加font-size: 0，再给li单独设font-size
Flex 方案天然规避这个问题，所以复杂布局优先选 Flex。
真正麻烦的不是“怎么居中”，而是你得先分清：要居中的到底是整个列表、某一行、还是每个 li 里的内容——选错目标，代码就全跑偏。
