text-align: center必须作用于块级父容器才能使内部行内内容（文字、img等）水平居中，对行内元素自身、flex/grid容器、脱离文本流元素（float/absolute）及块级子元素均无效。
text-align: center 写在了行内元素上
它只对块级容器生效，不是给文字或 <span></span>、<u></u> 这类行内元素加的。加了也没用，浏览器直接忽略。
常见翻车写法：<span style="text-align: center">这段文字</span> —— <span></span> 是行内元素，没有“内部文本流”可排布，text-align 失效。
正确做法是包一层块级容器，比如：<p style="text-align: center"><span>这段文字</span></p>，或者把 <span></span> 改成 display: inline-block 后再由父级控制。
父容器用了 flex 或 grid 布局
text-align: center 在 display: flex 或 display: grid 的父容器里完全不生效——它的水平对齐逻辑被 justify-content 覆盖了。
例如：<div style="display: flex"><p style="text-align: center">文字</p></div>，此时 text-align 不起作用，得用 justify-content: center 控制整个 <p></p> 的位置，或改用 text-align 仅影响 <p></p> 内部文字（如果它还有子内容）。
注意：place-items: center 也依赖父容器是 grid，且子元素不能设 width: 100% 否则视觉上“撑满”，看起来没居中。
子元素脱离了文本流
text-align 只管还在文本流里的内容，一旦子元素用了 float、position: absolute 或 display: block（尤其是图片被设为 display: block），它就“看不见”了。
典型表现：<p style="text-align: center"><img src="x.jpg" style="max-width:90%"></p>，图片不会居中，因为 display: block 让它脱离行内流；去掉 display: block 就能被 text-align 管到。
其他干扰项：<div> 嵌套在 <code><p></p> 里（HTML 规范不允许，浏览器会自动闭合 <p></p>，导致结构错乱）、伪元素 ::after 绝对定位拉低容器高度，间接影响居中基准。
误把文字居中当成盒子居中
这是最隐蔽也最常被忽略的一点：text-align: center 让文字居中，margin: 0 auto 才让盒子自身居中——但后者必须同时满足：块级 + 明确 width + 未脱离文档流。
比如：<div style="text-align: center; margin: 0 auto">文字</div>，若没设 width，margin 部分完全无效，你看到的只是文字居中，不是 <div> 居中。
<p>更麻烦的是嵌套场景：父 <code><div> 设了 <code>text-align: center，里面一个 width: 200px 的子 <div> 依然左贴边——因为它仍是块级，默认独占一行，<code>text-align 对它不起作用。
