不会。text-indent 只影响第一行开头空白，不覆盖 text-align: center，但会使居中基准点右移导致视觉偏右；推荐用 padding-left 替代或 ::first-line 伪元素实现首行缩进与整体居中兼容。
text-align: center 会被 text-indent 覆盖吗？
不会。text-indent 只影响第一行开头的空白，不改变文本块的整体对齐逻辑；text-align: center 依然生效，但“居中基准点”变成了缩进后的第一行起始位置——这会导致视觉上文字整体偏右，看起来像没居中。
为什么加了 text-indent 后文字明显右偏？
因为 text-indent 是在行盒（line box）最左侧插入空白，而 text-align: center 是把整行内容（含这个空白）按总宽度居中。结果就是：缩进 + 文字内容 → 整体重心右移。
- 常见错误现象：
div设了text-align: center和text-indent: 2em，单行文字明显靠右，多行时只有首行缩进、其余行居中，显得不对称 - 如果容器宽度刚好卡住文字（比如
width: fit-content），缩进会直接把文字推出可视区 - 用开发者工具检查 computed 样式，能看到
text-indent值被正确应用，但text-align的对齐参考线已包含缩进空间
怎么让首行缩进 + 整体居中同时成立？
核心思路：不让 text-indent 干扰居中基准。推荐两种实操方案：
-
方案一（推荐）：用 padding-left 替代 text-indent
给父容器加padding-left: 2em，再设text-align: center。这样缩进变成容器内边距，文字内容本身仍以容器中心为基准居中 -
方案二：包裹一层 span 控制首行
把首行文字单独包在<span></span>里，设display: inline-block; margin-left: 2em；其余行保持默认。避免影响整体对齐逻辑 - 不要用
margin-left直接作用于段落元素（如p），它会让整个块偏移，破坏text-align的作用范围
Flex 布局下 text-indent 还有效吗？
有效，但行为更难预测。因为 Flex 容器中，text-align 默认不控制主轴对齐（由 justify-content 管），而 text-indent 仍作用于子元素内的文本流。
- 如果子元素是
div且未设display: block，text-indent可能无效（inline 元素不支持） - 若子元素是
p或span，text-indent会生效，但justify-content: center已把整个p居中，缩进会叠加在居中后的位置上，导致同样右偏 - 此时更干净的做法：去掉
text-indent，改用::first-line伪元素 +padding-left或margin-left
真正容易被忽略的是：缩进和居中本质是两个不同层级的操作——缩进属于文本流内部排版，居中属于容器级布局。混用时必须明确谁在控制“参考系”。直接套用 text-indent + text-align 看似简单，实际是把两个坐标系强行叠在一起，偏移几乎必然发生。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
