text-align仅作用于块级容器内行框中的内联级内容，不影响块级子元素；居中块级元素应使用margin:0 auto、flex+justify-content、grid+justify-items或绝对定位。
text-align 只对内联内容和表格单元格生效
text-align 不是“让任意元素居中”的万能属性。它的作用对象本质上是**块级容器内的行框（line box）中的内联级内容**，包括文本、<img>、<span>、<input>（作为替换元素）等内联或内联块元素。它不会影响块级子元素的布局位置。
常见误解是给一个 div 设置 text-align: center 后，期望里面所有子 div 都水平居中——这仅在子元素是 display: inline 或 inline-block 时才成立；若子元素是默认 display: block，则完全不受影响。
让块级元素居中该用什么替代 text-align
要真正居中块级子元素，需切换布局上下文：
- 对单个固定宽高的块：用
margin: 0 auto（需设置width） - 对弹性子项：父容器设
display: flex+justify-content: center - 对网格子项：父容器设
display: grid+justify-items: center -
绝对定位居中：子元素
position: absolute+left: 50%+transform: translateX(-50%)
table-cell 是 text-align 的特例场景
text-align 在 display: table-cell 元素上也有效，且行为一致：控制单元格内**内联内容的水平对齐**。这点常被用来模拟“垂直+水平居中”，但本质仍是作用于单元格内部的行框，不是直接移动单元格本身。
立即学习“前端免费学习笔记（深入）”；
例如：
.cell {
display: table-cell;
width: 200px;
height: 100px;
text-align: center; /* 水平居中文字/内联元素 */
vertical-align: middle; /* 垂直居中（这是 table-cell 自身特性） */
}flex / grid 容器里 text-align 失效的典型原因
当父元素设为 display: flex 或 display: grid 后，其子元素不再参与常规文档流的行框布局，text-align 就失去作用对象。此时必须用对应布局模型的对齐属性：
- Flex 容器：改用
justify-content（主轴）、align-items（交叉轴） - Grid 容器：改用
justify-items、align-items或justify-self等 - 不要在 flex 容器上同时写
text-align和justify-content试图“叠加效果”——后者完全主导
最易忽略的是：即使 flex 子项是纯文本，text-align 也不再控制其对齐，因为文本已属于 flex 项目的内容，而非父 flex 容器的“行内内容”。
