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