text-align: center 必须作用于块级容器（如或其父元素）才能使内部文字水平居中，对行内元素无效，且在flex容器或浮动/绝对定位干扰下会失效。

text-align: center 能让 <p></p> 标签内的文字水平居中，但必须作用在 <p></p> 本身（或它的父块级容器）上，而不是文字或子元素上。写错位置、用错对象、忽略容器特性，是 90% 居中失败的根源。

为什么给 <p></p> 加 text-align: center 没反应？

常见错误不是代码写错了，而是没理解 text-align 的作用边界：

• 把 text-align: center 写在 <span></span> 或 <em></em> 这类行内元素上——它只对块级容器生效，行内元素加了也无效
• <p></p> 被包裹在另一个未设宽度、或用了 display: flex 的父容器里——此时 text-align 被 flex 的 justify-content 覆盖，完全不触发
• <p></p> 里嵌套了 float 元素或 position: absolute 图片——这些内容已脱离文本流，text-align 管不到它们
• 用 <p style="text-align: center"></p> <div>文字</div>——<div> 是块级，会独占一行，<code>text-align 只影响行内内容，对它不起作用

  <p></p> 标签加 text-align: center 的正确写法

  最简可行方案就是直接在 <p></p> 上声明样式，无需额外 wrapper：

  <p style="text-align: center;">这段文字会水平居中</p>

  如果用 CSS 类，也一样要作用于 <p></p> 元素本身：

  .centered-paragraph { text-align: center; }
  <p class="centered-paragraph">我也会居中</p>

  注意以下三点：

  

  Wechat HTML Publisher

  直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

  下载
  • 不需要给 <p></p> 设 width ——它默认块级，宽度撑满父容器，text-align 管的是内部文字排布，不是盒子定位
  • 若 <p></p> 父容器是 inline-block，且未设 text-align，那得在父容器的父级上加，否则视觉上仍偏左
  • <p></p> 里的 <img> 会被一起居中——因为 <img> 是替换元素，默认按行内方式参与文本流

  和 margin: 0 auto 混用时的实际效果

  这两个属性常被同时写，但它们干的是完全不同的事：

  • text-align: center 控制 <p></p> 内部文字、图片等行内内容的水平位置
  • margin: 0 auto 控制 <p></p> 自身在父容器中的左右位置——但它要求 <p></p> 有明确 width，否则无效
  • 如果写成 <p style="text-align: center; margin: 0 auto; width: 300px;"></p>，结果是：<p></p> 自身居中 + 内部文字居中，两者互不干扰
  • 但如果漏了 width，margin: 0 auto 就失效，只剩 text-align 起作用——这时你以为“整个段落没居中”，其实是你误把文字居中当成了盒子居中

  真正要小心的边界情况

  最容易被忽略的是嵌套结构里的继承与覆盖：

  • text-align 会继承，所以如果父 <div> 设了 <code>text-align: right，而你只在子 <p></p> 上写 text-align: center，它仍然有效；但如果父容器用了 display: flex，那 text-align 直接被无视
  • 表格单元格（<td>）也支持 <code>text-align，但它有自己的对齐优先级，有时会和 CSS 规则冲突
  • 响应式场景下，如果用媒体查询改了父容器的 display（比如从 block 切到 flex），text-align 就突然失效——这不是 bug，是机制切换