text-indent 与 text-align: center 不能共用，因居中会重算缩进基准导致视觉失效；正确做法是外层容器控制居中、内层段落单独设置 text-indent；td 或 flex/grid 中推荐用 padding-left 替代。
text-indent 和 text-align: center 不能共用在同一个 <p>
给 <p> 同时加 text-align: center 和 text-indent: 2em，首行缩进大概率“消失”。这不是 bug，而是浏览器渲染逻辑冲突：text-align: center 会把整个内容盒（content box）水平居中，导致 text-indent 的起始基准被重算——缩进值还在（开发者工具里 Computed → text-indent 显示 2em），但视觉上被居中拉回去了。
特别当段落只有一行时，整行被居中，text-indent 完全不可见；多行时第二行左对齐、首行看似没动，其实是被居中“拽平”了。
正确做法：外层居中 + 内层缩进
必须拆开职责，让容器管居中、段落管缩进：
- 外层容器（比如
<div>）设text-align: center或margin: 0 auto+width控制整体水平位置 - 内层
<p>保持默认display: block，只加text-indent: 2em，不设text-align - 如果外层用了
display: flex，别给<p>加justify-content—— 那是父容器的事，<p>只负责自己段内的缩进
<td> 里想缩进，优先用 padding-left
text-indent 在 <td> 中常“看不见”，不是失效，是被视觉吞掉了：
立即学习“前端免费学习笔记（深入）”；
-
<td>默认vertical-align: middle，缩进后文字上移，又被中线对齐拉回中心 - 内容太短（如“是”“否”）时，2em 缩进像素被内容宽度覆盖，肉眼看不出
- 很多 UI 框架（如 Ant Design）默认加
white-space: nowrap，整段压成一行，缩进区域直接溢出或裁掉 - 用
padding-left: 2em更可靠：它不依赖“首行”判定，不受white-space或direction干扰，打印导出也稳定
flex/grid 容器里 text-indent 失效怎么办
当 <p> 是 display: flex 或 display: grid 的直系子元素时，text-indent 常不生效——这是格式化上下文变更的自然结果，不是样式写错了。
- 首选方案：改用
padding-left: 2em模拟缩进，兼容性好，不影响文本流 - 若必须保留语义（比如要匹配旧打印样式），给
<p>显式加display: block，并确认其width不是auto（flex item 默认width: auto可能导致块级行为退化） - 检查是否被
align-self或justify-content干扰——这些属性作用于 flex item，会覆盖text-indent的视觉表现
真正容易被忽略的是：缩进和居中从来不是同一个层级的问题。居中是容器级布局决策，缩进是段落级排版语义。混在一起写，等于让浏览器同时执行两套互相抵消的定位逻辑。
