列表元素本身不是行内元素，直接用 text-align: center 无效；正确做法是将 li 设为 inline-block 并对 ul 设置 text-align: center，或使用 flexbox 的 justify-content: center 实现水平居中，同时需清除 ul 默认 padding-left 以避免偏移。
列表元素本身不是行内元素，直接用 text-align: center 无效
很多人一上来就给 <ul> 或 <ol> 加 text-align: center，发现列表项（<li>）根本没居中——因为 <li> 默认是块级元素，text-align 只影响其内部的**行内内容对齐**，不控制 <li> 自身的位置。
真正要居中的，是 <li> 这些块级盒子在容器里的水平位置。
- ✅ 正确思路：让
<li>变成可被text-align影响的行内级，或用更现代的布局方式控制其定位 - ⚠️ 注意：不要给
<ul>设display: inline-block后再套父容器居中——这容易因默认vertical-align: baseline导致错位 - ? 最稳妥通用的做法是把
<li>改为display: inline-block，再对<ul>应用text-align: center
display: inline-block + text-align: center 是兼容性最好且可控的方案
适用于所有浏览器（包括 IE8+），且能保留列表语义和默认间距控制。
<ul class="centered-list"> <li>首页</li> <li>关于</li> <li>联系</li> </ul>
对应 CSS：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
.centered-list {
text-align: center;
padding-left: 0; /* 清除默认 ul 左侧缩进 */
}
.centered-list li {
display: inline-block;
margin: 0 12px; /* 手动控制 item 间距，比默认 list-style 更可控 */
}- 必须清除
<ul>的默认padding-left，否则整体仍偏左 -
margin建议用固定值（如12px），避免inline-block元素间因换行产生的空格间隙干扰布局 - 如果列表项含链接，记得重置
a的text-decoration和display，防止下划线或换行破坏居中效果
Flexbox 方案更简洁，但需确认目标环境支持 display: flex
现代项目首选。把 <ul> 当 flex 容器，<li> 自动成为 flex 项目，一行居中非常直观。
.centered-list {
display: flex;
justify-content: center;
list-style: none;
padding: 0;
margin: 0;
}
.centered-list li {
margin: 0 16px;
}- 无需改
<li>的 display 类型，语义和盒模型更干净 -
justify-content: center直接作用于主轴（默认水平），精准控制所有<li>的水平位置 - 注意：IE10–IE11 对 flex 有部分 bug（比如
flex-wrap不稳定），若需支持，建议加 autoprefixer 或回退到inline-block方案
别忽略响应式断点下的行为差异
水平居中在小屏上可能造成文字折行或溢出，尤其当列表项较多或文案较长时。
- 用
flex-wrap: wrap允许换行，配合justify-content: center实现多行居中 - 移动端建议改用垂直堆叠（
flex-direction: column）+ 左对齐，而非强行维持水平居中 - 检查
min-width和white-space: nowrap是否意外锁死了宽度，导致容器撑开或滚动
最常被忽略的是：居中只是视觉需求，不能以牺牲可访问性或语义结构为代价。确保屏幕阅读器仍能按顺序读出 <li>，且焦点顺序不受 display 变更影响。
