text-align: center必须作用于直接父块级容器而非文字本身；若父元素为行内元素（如<span>）、子元素脱离文本流（float/absolute/flex）或在flex容器中，则无效。
检查目标元素是不是块级容器
text-align 不是加在要居中的文字上，而是加在它的**直接父块级容器**上。如果父元素是 <span>、<u> 或其他默认行内元素，那它根本不会生效——因为行内元素没有“内部文本流”的概念，也没有宽度可撑起对齐基准。
常见翻车现场：<span style="text-align: center">这段文字不会居中</span>。正确做法是包一层 <div> 或直接用 <p>，再给这个块加 text-align: center。
- ✅ 有效：
<div style="text-align: center"><p>我居中了</p></div> - ❌ 无效：
<span style="text-align: center"><p>我不会居中</p></span>（<span>是行内，不渲染为块级上下文） - ⚠️ 注意：
<img>默认是行内元素，所以能被text-align控制；但一旦设了display: block，它就脱离行内流，text-align失效
确认子元素是否脱离了文本流
即使父容器是块级且设置了 text-align: center，只要子元素用了 float、position: absolute 或 display: flex，它就不再属于“行内内容”，text-align 完全管不到。
典型表现：父 <div> 加了居中样式，里面一个 <div> 还是贴左。这不是 bug，是机制使然——那个子 <div> 是块级、独占一行，text-align 只排布“行内内容”，不挪动块盒子本身。
立即学习“前端免费学习笔记（深入）”；
- 如果想让子
<div>居中，得用margin: 0 auto（需明确width）或改用display: flex+justify-content: center - 如果子元素是
<img>却没居中，先查它有没有被设成display: block或float: left - Flex 容器会完全忽略
text-align水平对齐，只认justify-content
排查 HTML 的 align 属性干扰
虽然 align 是 HTML5 废弃属性，但在 Outlook、Android WebView、部分邮件客户端里，它仍比 CSS text-align 优先级高。哪怕你写了 td { text-align: center !important }，只要源码里存在 <td align="left">，就可能被强制覆盖。
- 全局搜索项目里有没有残留的
align="..."，尤其注意表格单元格<td>和旧模板里的<div align="center"> - 邮件场景下，优先用内联样式 +
!important，但更稳妥的是删干净所有align属性 -
<table>上设text-align不可靠——必须写到<td>或<th>才真正生效
区分“居中文本”和“居中元素盒子”
这是最常混淆的点：text-align: center 只负责把文字、图片等行内内容在父块里水平排布；它不管这个父块自己在页面里放哪儿。如果你看到“文字居中了但整个区块还是偏左”，大概率是你误把“内容居中”当成了“容器居中”。
- 要居中一段文字？→ 给它的父
<p>或<div>加text-align: center - 要居中一个固定宽的卡片
<div>？→ 给它自己加margin: 0 auto（并确保有width）或用flex - 要同时居中又垂直对齐？→
text-align不够，得靠display: flex+justify-content+align-items
复杂点在于：嵌套层级一多，继承和覆盖就容易打架。比如父 <div> 设了 text-align: right，子 <div> 又设 text-align: center，但子里面有个 float 的按钮——这时候按钮位置由 float 决定，文字由子 div 的 text-align 决定，而子 div 自身位置又取决于父容器布局方式。每层都得单独理清楚作用对象。
