为什么CSS text-align:center无法居中块元素-css教程-PHP中文网

text-align:center不能居中块元素，因为它只作用于块容器内的行内内容（如文字、img、span、inline-block元素），对块级子元素自身位置无效；块元素居中应使用margin:0 auto、flex+justify-content:center或absolute+transform等方案。

为什么css text-align:center无法居中块元素

text-align:center 不能居中块元素，因为它根本就不是干这个的。 它只负责让块容器内部的行内内容（文字、<img>、span、inline-block 元素）水平居中，对块元素自身的位置毫无影响。

text-align:center 的作用对象是谁？

它只作用于「行内流中的内容」：文本、span、img、button（默认 inline）、display: inline-block 元素等。只要这些元素是某个块级父元素的直接子元素或后代，并且没脱离文档流，text-align:center 就能控制它们的水平位置。

但它对以下元素完全无效：

普通块元素（如 div、p、section），哪怕设置了 width
脱离文档流的元素（position: absolute / fixed）
浮动元素（float: left / right）

为什么你写的 div 没居中？常见错误场景

典型错误写法：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

<div style="text-align:center">
  <div style="width:200px; background:yellow">我不会居中</div>
</div>

这里外层 div 的 text-align:center 对内层那个块级 div 不起作用 —— 因为内层 div 是块级，不是「行内内容」。

真正生效的情况只有这些：

内层是 span：<span>文字</span> → 文字居中
内层是 img：<img src="x.jpg"> → 图片居中（默认 inline）
内层加了 display:inline-block：<div style="display:inline-block;width:200px"></div> → 整个 div 居中

块元素想居中，该用什么？

三种主流方式，按推荐顺序：

margin: 0 auto：最经典，要求块元素有明确 width（或 max-width），且未设置 float 或 position: absolute
display: flex + justify-content: center：父容器设为 flex，子块自动水平居中，兼容性好（IE11+）
position: absolute + left: 50% + transform: translateX(-50%)：适合脱离流的定位需求，但需注意祖先是否已定位