text-align: center仅对块级容器内的行内内容生效，不作用于行内元素自身或脱离文本流的元素；需注意与flex布局的兼容性及margin: 0 auto的宽度前提。
text-align: center 是最直接、最常用的 HTML 文本居中方式，但它只对块级容器生效，且作用对象是“容器内的行内内容”，不是容器自己。
为什么给 <p> 加 text-align: center 没反应？
常见错误不是写错了 CSS，而是没理解它的作用边界：
- 把
text-align: center写在<span>或<em>这类行内元素上——它只对块级容器（如<p>、<div>、<h1>）有效 -
<p>被包在display: flex的父容器里——此时justify-content会覆盖text-align，后者完全不触发 -
<p>里嵌套了float或position: absolute元素——这些已脱离文本流，text-align管不到 - 写了
<p style="text-align: center"><div>文字</div></p>——<div>是块级，独占一行，text-align对它无效
<h1> 到 <h6> 和 <p> 怎么安全加居中？
直接在标签上加内联样式或 class 即可，无需额外 wrapper：
<h2 style="text-align: center;">这个标题会居中</h2> <p class="centered">这段文字也会居中</p>
CSS 类写法：
立即学习“前端免费学习笔记（深入）”；
.centered { text-align: center; }
注意三点：
- 不用给
<p>或<h2>设width——它们默认块级，撑满父容器，text-align控制的是内部排布 - 如果父容器是
inline-block且没设text-align，那得在父容器的父级上加，否则视觉上仍偏左 -
<img>在<p>里会被一起居中——因为它是替换元素，按行内方式参与文本流
用 margin: 0 auto 居中段落？小心这俩坑
margin: 0 auto 和 text-align: center 完全不是一回事：
-
text-align: center：控制<p>内部文字、图片等的水平位置 -
margin: 0 auto：控制<p>自身在父容器中的左右位置，但要求它有明确width，否则无效 - 写成
<p style="text-align: center; margin: 0 auto; width: 400px;">才是“段落盒子居中 + 内容居中” - 漏了
width，margin: 0 auto就静默失效，只剩text-align起作用——这时你以为“没居中”，其实是混淆了“内容居中”和“盒子居中”
行内元素（如 <span>、<strong>）怎么居中自身？
text-align: center 对它们无效，因为它们不是容器。要让这类元素视觉上居中，得换思路：
- 把它变成块级或行内块：
display: inline-block或display: block，再配margin: 0 auto（需设宽） - 或者，把它包进一个块级容器（如
<div>），然后对容器设text-align: center - 更现代的做法：用 Flex 布局，父容器设
display: flex; justify-content: center;，子元素不用改 display
真正容易被忽略的点是：同一页面里混用 text-align 和 Flex 布局时，父容器的 display 类型会直接废掉前者——这不是 bug，是 CSS 规范定义的行为。
