text-align仅对块级容器内的行内内容生效，对flex/grid布局、绝对定位元素及块级子元素无效；正确用法是配合block/table-cell等容器，并注意RTL语言和现代布局替代方案。
text-align 在块级元素里才起作用
很多人试过给 div 设 text-align: center，发现文字没居中，一查发现它父容器是 flex 或 grid ——这时候 text-align 基本无效，它只对「行内内容」生效，前提是容器本身是块级且非弹性/网格布局。
常见错误现象：text-align 对 display: flex 子元素无影响；对 position: absolute 的元素也不起作用（除非它还在文档流中且父容器是块级）。
- 使用场景：给段落、标题、按钮文字、表单内联标签等做水平对齐
- 真正起效的条件：父容器需是
display: block（或table-cell、list-item等少数例外）且子元素是inline或inline-block - 注意
text-align: justify在中文下效果有限，浏览器通常不自动断字，容易产生过大词间距
flex 布局中 text-align 失效，该用 justify-content
当容器设了 display: flex，text-align 就退场了——对齐逻辑交给 justify-content 和 align-items。强行保留 text-align 不但没用，还容易掩盖布局意图。
典型误用：div { display: flex; text-align: center; } → 文字不会居中，必须改用 justify-content: center。
立即学习“前端免费学习笔记（深入）”；
-
justify-content控制主轴（默认是横轴）上子项的分布，等价于text-align在块级中的“水平”作用 - 如果子项是单个
span或文本节点，且你又想让它在 flex 容器里居中，得确保它没被设成flex本身（否则它会撑满） - 兼容性提醒：IE10/11 对
justify-content: space-evenly不支持，老项目慎用
table-cell 中 text-align 表现特殊
text-align 在 display: table-cell 上行为和普通块级一致，但它能配合 vertical-align 实现真·垂直+水平居中，这点常被忽略。
常见错误：给 td 设 text-align: center 没问题，但换成自定义 div { display: table-cell; } 后，忘了加 display: table 的父容器，导致样式完全不生效。
- 必须成对出现：
table-cell需要父级是display: table（或inline-table），否则降级为block -
text-align在table-cell中可对齐单元格内所有行内内容，包括换行后的多行文本 - 性能影响小，但语义混乱：纯布局用
table-cell已属过时方案，现代项目优先选 flex/grid
RTL 语言下 text-align:right 的实际效果
在阿拉伯语、希伯来语等从右向左书写的语言中，text-align: right 并不等于「靠右对齐」，而是「按当前语言方向对齐到起始边」——即 RTL 下它实际是「靠左对齐」（因为起始边是左边）。
错误理解会导致国际化项目文字溢出或阅读顺序错乱。
- 正确做法：用
text-align: start替代right，它会自动适配 LTR/RTL - 若必须用
right，请搭配dir="rtl"属性或direction: rtl声明，否则浏览器按默认 LTR 解析 - CSS 逻辑属性（如
text-align: end）更可靠，但 IE 完全不支持，上线前务必检查目标环境
最易被忽略的一点：text-align 从不控制块级子元素的位置，只管「行框」内的内联内容。哪怕你写了 text-align: center，一个 div { display: block; width: 200px; } 依然会左对齐——它压根不是「行内」。这时候得用 margin: 0 auto，或者换 layout 模式。
