text-align: center 必须作用于块级容器（如<p>或其父元素）才能使内部文字水平居中，对行内元素无效，且在flex容器或浮动/绝对定位干扰下会失效。
text-align: center 能让 <p> 标签内的文字水平居中，但必须作用在 <p> 本身（或它的父块级容器）上，而不是文字或子元素上。写错位置、用错对象、忽略容器特性，是 90% 居中失败的根源。
为什么给 <p> 加 text-align: center 没反应？
常见错误不是代码写错了，而是没理解 text-align 的作用边界：
- 把
text-align: center写在<span>或<em>这类行内元素上——它只对块级容器生效，行内元素加了也无效 -
<p>被包裹在另一个未设宽度、或用了display: flex的父容器里——此时text-align被 flex 的justify-content覆盖，完全不触发 -
<p>里嵌套了float元素或position: absolute图片——这些内容已脱离文本流，text-align管不到它们 - 用
<p style="text-align: center"><div>文字</div></p>——<div>是块级，会独占一行，text-align只影响行内内容，对它不起作用
<p> 标签加 text-align: center 的正确写法
最简可行方案就是直接在 <p> 上声明样式，无需额外 wrapper：
<p style="text-align: center;">这段文字会水平居中</p>
如果用 CSS 类，也一样要作用于 <p> 元素本身：
立即学习“前端免费学习笔记（深入）”；
.centered-paragraph { text-align: center; }
<p class="centered-paragraph">我也会居中</p>
注意以下三点：
- 不需要给
<p>设width——它默认块级，宽度撑满父容器，text-align管的是内部文字排布，不是盒子定位 - 若
<p>父容器是inline-block，且未设text-align，那得在父容器的父级上加，否则视觉上仍偏左 -
<p>里的<img>会被一起居中——因为<img>是替换元素，默认按行内方式参与文本流
和 margin: 0 auto 混用时的实际效果
这两个属性常被同时写，但它们干的是完全不同的事：
-
text-align: center控制<p>内部文字、图片等行内内容的水平位置 -
margin: 0 auto控制<p>自身在父容器中的左右位置——但它要求<p>有明确width，否则无效 - 如果写成
<p style="text-align: center; margin: 0 auto; width: 300px;">，结果是：<p>自身居中 + 内部文字居中，两者互不干扰 - 但如果漏了
width，margin: 0 auto就失效，只剩text-align起作用——这时你以为“整个段落没居中”，其实是你误把文字居中当成了盒子居中
真正要小心的边界情况
最容易被忽略的是嵌套结构里的继承与覆盖：
-
text-align会继承，所以如果父<div>设了text-align: right，而你只在子<p>上写text-align: center，它仍然有效；但如果父容器用了display: flex，那text-align直接被无视 - 表格单元格（
<td>）也支持text-align，但它有自己的对齐优先级，有时会和 CSS 规则冲突 - 响应式场景下，如果用媒体查询改了父容器的
display（比如从block切到flex），text-align就突然失效——这不是 bug，是机制切换
