text-align:center仅对块级父容器内的行内内容生效，不能直接作用于img或span等元素；图片设为display:block后text-align失效，需用margin:0 auto配合width居中。
text-align:center 作用对象错了
这个属性只对块级容器内部的行内内容起作用，不是让元素自己居中。常见误用是给 <img> 或 <span></span> 直接加 text-align: center，这完全无效——它必须写在父级 <div>、<code><p></p> 这类块级元素上。
典型错误现象：<div><img src="a.jpg"></div>，只给 <img> 加样式，或给 <div> 加了但没效果，大概率是父容器本身没宽度、被 <code>float 拉偏，或者子元素被设成了 display: block 后脱离了“行内上下文”。
图片加了 display: block 后 text-align 失效
图片默认是 inline 元素，理论上受父容器 text-align 控制；但一旦显式设置 display: block，它就不再是“行内内容”，text-align 对它彻底失能。
- 想用
text-align居中图片 → 别动它的display，确保父<div> 是标准块级且有宽度（哪怕由内容撑开） <li>想用 <code>margin: 0 auto居中图片 → 必须同时设display: block+ 明确width（百分比或像素都行） - 两者混用（比如先设
display: block再指望text-align）→ 必然失败 - 父容器是否意外加了
position: relative却忘了配text-align - 子元素是否用了
position: absolute→ 改用left: 50%; transform: translateX(-50%) - 父容器是否被
float带偏 → 加clear: both或改用display: flow-root
absolute / float / transform 干扰文档流
position: absolute 的元素完全脱离文档流，text-align 对它视而不见——这不是 bug，是规范行为。同理，float 会让父容器高度塌陷，导致“看似加了 text-align 却没空间可居中”；而 transform 或 overflow: hidden 触发新层叠上下文时，若未同步处理尺寸，也可能让居中视觉错位。
检查点：
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
浏览器把标签当成了块级，但你没意识到
像 <h2></h2>、<p></p> 这类语义化标签，浏览器默认就是 display: block，所以直接在它们上面写 text-align: center 是有效的；但如果你在 <h2></h2> 里嵌了个 <span></span>，又想让这个 <span></span> 居中，就得看它的父级是不是块级——如果父级是另一个 <span></span> 或 <a></a>，那就不行。
快速验证方法：打开开发者工具，选中目标元素，看 computed 标签页里的 display 值。如果是 inline，它自己不能被 text-align 居中；只有它的父块级容器能设这个属性。
真正容易被忽略的点：没有一个通用的“让任意元素居中”的 CSS 属性。text-align、margin: auto、flex、grid 各自生效的前提完全不同，混用前得先确认当前元素所处的布局上下文。
