text-align: center 只对块级父容器内的行内内容生效，必须作用于父元素而非文字本身；若子元素为块级、脱离文本流（如float/absolute）或父容器无明确宽度，则无效。
text-align: center 能让文字水平居中，但只对块级容器内的行内内容生效——不是给文字本身加，而是给它的父元素加。
为什么 text-align: center 没反应？
最常见原因是：目标元素不是块级容器，或它内部的内容没被当作“行内内容”处理。
- 直接写在
<p></p>或<div> 上才有效；写在 <code><span></span>、<a></a>这类行内元素上无效 - 父容器没设置明确宽度（比如
width: 100%或具体像素值），在某些嵌套场景下可能视觉上“看不出居中” - 子元素用了
float、position: absolute或display: flex，会脱离文本流，text-align对它们不起作用 - 父容器是
display: inline-block且没设text-align，那它的父级就得负责居中它 - 适合：段落文字、标题、
<img>（默认行内）、<span></span>、按钮文字等 - 不适合：想让一个
<div> 自身居中（得用 <code>margin: 0 auto或 flex） - 不能垂直居中：哪怕父容器有高度，
text-align也不影响上下位置 - 会影响所有子代行内内容：如果父容器里既有文字又有图片，两者都会被居中
-
margin: 0 auto是让块级元素自己在父容器里居中，前提是它有明确的width - 如果你给一个设置了
margin: 0 auto的<div> 再加 <code>text-align: center，只是让它内部的文字居中，不影响该<div> 的位置 <li>反过来，如果只给父容器设 <code>text-align: center，却希望里面一个宽300px的<div> 居中，它不会动——因为 <code><div> 是块级，默认独占一行，<code>text-align不控制它 - 典型翻车现场：
<div style="text-align: center"><div style="width: 200px">我不会居中</div></div>
真正要让任意 HTML 元素水平居中，得先分清：你要居中的对象是“文字内容”还是“元素盒子本身”。
text-align: center 的适用边界在哪里？
它只管“怎么排布行内内容”，不管“元素自身怎么放”。所以：
和 margin: 0 auto 混用时容易出什么问题？
这两个常被误认为“都能居中”，但机制完全不同，混用反而坏事：
text-align: center 只管前者，而且只在它作为父容器样式时才起效——这个前提，90% 的人第一次写错都栽在这儿。
