列表项（li）居中需通过父容器（ul/ol）控制，必须清除默认padding/margin；text-align仅影响行内内容，不使li自身居中；ul需设width（如fit-content）配合margin:0 auto，或用flex布局并清除默认样式。
列表项（li）本身不能直接“居中”，真正起作用的是它的父容器（ul 或 ol）的布局方式和默认样式干扰。不重置默认 padding 和 margin，任何居中设置都会偏移或失效。
为什么 text-align: center 对 ul 没反应？
因为 li 默认是块级元素，会独占一行，text-align 只影响行内内容（如 a、文本），不会让 li 自己水平居中。常见错误现象是：加了 text-align: center 后，文字看起来居中了，但整个 ul 左侧仍有大段空白——那是浏览器给 ul 默认加的 padding-inline-start: 40px。
- 必须显式清除：
ul { padding-inline-start: 0; margin: 0; } - 如果想让每个
li内的链接（a）文字居中，才在li或a上设text-align: center - 若保留项目符号（
list-style），padding-inline-start: 0可能导致圆点被截断；此时改用list-style-position: inside;
margin: 0 auto 居中整个 ul 容器时为啥没效果？
因为 ul 默认是块级元素且宽度为 100%，margin: 0 auto 需要它有“可计算的宽度”才能分配左右空隙。不设宽，就等于没给浏览器留出居中的依据。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 推荐写法：
ul { width: fit-content; margin: 0 auto; }（现代、响应式、兼容 Chrome/Firefox/Safari 15.4+） - 老浏览器兜底：
ul { width: 320px; margin: 0 auto; }（需预估最大内容宽度） - 别漏掉清除默认缩进：
ul { padding-inline-start: 0; }，否则width: fit-content会把那 40px 也算进去
用 Flex 实现 li 精准垂直+水平居中（含绝对定位场景）
当需要把整个列表（比如导航菜单）在视口中央弹出显示，或嵌入固定高宽容器中时，Flex 是最可控的方式。但要注意：Flex 容器（ul）一旦启用，li 就变成 flex 项，text-align 失效，对齐逻辑全由 justify-content 和 align-items 控制。
立即学习“前端免费学习笔记（深入）”；
- 父容器（如
.nav-modal）需有明确高度，否则align-items: center无参照 - 清除
ul默认样式：ul { padding: 0; margin: 0; list-style: none; } - 关键组合：
ul { display: flex; flex-direction: column; justify-content: center; align-items: center; } - 若
li内含a，且希望点击区域完整、文字左对齐，给a加：display: block; width: 100%; text-align: left;
项目符号错位、消失或右侧被截？不是居中问题，是盒模型冲突
居中后发现圆点没了、缩进异常、或者右边文字被裁切，90% 是 list-style 渲染和 padding/width 设置打架。这不是居中逻辑错了，而是浏览器在计算项目符号位置时，把默认缩进、自定义 padding、box-sizing 全混在一起算。
- 最稳妥解法：彻底关掉默认样式，用伪元素重绘项目符号（
li::before） - 快速修复：用
list-style-position: inside;把圆点拉进内容区，再配padding-left: 0; - 绝对定位居中时（
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)），务必确认父容器是position: relative，且ul本身已清空所有默认边距
