text-align仅对行内内容在行框内水平对齐生效，不能使块级元素自身居中或垂直居中文字；它不控制元素在父容器中的位置，仅影响内部文字、span、img等行内级内容的水平对齐方式。
text-align 只对**行内内容**生效，不能让块级元素自身居中，也不能垂直居中文字——这是最常被误解的起点。
text-align 的作用范围和常见误用
它控制的是元素内部的**行内级内容**（如文字、<span></span>、<img>）在**行框（line box）内的水平对齐方式**，不是控制该元素自己在父容器里的位置。
- 对
div、p这类块级元素设置text-align: center，是让里面的所有文字/行内元素居中，不是让这个div居中 - 对
span或button这类行内/行内块元素设text-align无效——它们没有“内部行框”可对齐 - 对 flex 容器或 grid 容器，
text-align仍只影响其内部的纯文本或未被子项包裹的字符，不控制子项排列
实现单行文字水平居中（最常用场景）
适用于段落、标题、按钮文字等典型单行文本场景。只需确保目标元素是块级容器，且文字是它的直接子内容。
<p style="text-align: center;">这段文字会居中</p> <h2 style="text-align: right;">右对齐标题</h2>
- 支持值：
left、right、center、justify（两端对齐，注意最后一行不强制拉伸） - 继承性：默认继承，子元素无需重复声明（除非显式覆盖）
- 注意：若文字被
display: inline-block的span包裹，text-align依然有效，因为对齐发生在父块的行框内
为什么 text-align 无法垂直居中？替代方案是什么
因为 text-align 是 CSS Level 1 的属性，设计初衷就是处理「行内盒的水平对齐」，它根本不参与行高计算或基线调整。
- 垂直居中单行文字：用
line-height等于容器高度（仅限固定高容器） - 垂直居中多行文字：必须用
display: flex+align-items: center，或display: grid+place-items: center - 绝对定位 +
transform: translate(-50%, -50%)是兼容性更广的 fallback，但需额外定位上下文
IE8–IE9 中 text-align: justify 的坑
老版本 IE 对 justify 支持不完整：不处理中文、不撑开单词间空格、遇到换行符易错位。
- 若必须兼容，建议用 JavaScript 插件（如
hyphenator.js）辅助断词，或改用text-align: left+ 手动插入 -
text-align: start/end在现代浏览器中更语义化，但 IE 不支持，慎用于需要 RTL 支持的项目 - 移动端 Safari 对
justify的首行缩进处理不稳定，建议配合text-indent显式控制
真正要小心的不是怎么写 text-align，而是它根本没在帮你解决“容器居中”或“文字上下居中”这类问题——一旦发现居中失效，先确认你对齐的对象是不是行内内容，再检查父元素是否为块级、有没有被 float 或 flex 干扰了文档流。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
