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