text-align: center仅对块级父容器内的行内内容生效，须作用于父元素；对块级子元素、行内元素自身或flex容器无效，且不控制元素自身位置。
没有“一键”方案，但有最接近的通用解法：给父容器加 text-align: center。 它不是魔法按钮，但对绝大多数文字、链接、图片等行内内容，确实只要一行 CSS 就能生效——前提是用对地方。
为什么 text-align: center 常被误认为失效
它只作用于块级容器内的行内内容，不移动容器自身，也不影响块级子元素：
- 给
<div> 加了 <code>text-align: center，但里面放的是另一个<div> 或 <code><p></p>—— 这些子元素是块级，默认独占一行，text-align对它们没用 - 把
text-align: center写在<span></span>或<a></a>上——行内元素本身不接受这个属性，写了也白写 - 父容器用了
display: flex，此时justify-content会覆盖text-align，后者直接被忽略 - 父容器是
inline-block且没设宽度，或内部有换行符/空格干扰布局流 - 该元素必须有明确的
width（如width: 300px或width: 80%） - 它不能是
float、position: absolute或display: inline-block（除非父容器配合text-align: center） - 它对纯文本无意义——
<p style="margin: 0 auto">文字</p>不会改变文字位置，只会让<p></p>自身居中（如果设了宽度） - 优先用 Flex：给父容器设
display: flex+justify-content: center，标题文字自然居中；若需垂直居中，再加align-items: center，并确保容器有高度约束 - 避免绝对定位 +
transform：虽然能精确定位，但脱离文档流，后续元素无法感知其存在，易引发布局断裂 - 表格单元格内容居中，必须用
th, td { text-align: center; }，不要用废弃的align="center"属性 -
<center></center>标签已从 HTML5 废弃，W3C 验证器报错，Chrome/Firefox 行为不一致，生产环境禁用
margin: 0 auto 不是用来居中文本的
这是最常被混用的误区。它让**整个块级元素**在父容器中水平居中，但有两个硬性前提：
真正需要“同时控制文字+容器”的场景怎么办
比如一个卡片标题，既要标题块整体居中，又要内部文字居中，还要响应式适配：
最容易被忽略的一点：居中效果是否可见，往往取决于父容器有没有实际宽度和边界——比如一个没设 width 也没设 border 或 padding 的 <div>，你加了 <code>text-align: center，但根本看不到变化，因为它“看不见自己”。
