text-align: center 只对行内内容有效，不影响块级子元素位置；line-height 垂直居中仅适用于单行文本且需固定高度；可靠居中应优先使用 flex 或 grid。
text-align: center 为什么对 inline 元素以外的元素没反应
text-align 只控制**行内内容在块级容器中的水平对齐方式**，不是“让整个元素居中”。如果你给一个 div、section 或带 display: block 的元素设了 text-align: center，但里面放的是另一个块级元素（比如 h1、p、或没设置 display 的子 div），那它不会被居中——因为 text-align 不影响块级子元素的盒模型位置。
常见误用场景：
- 给父
div加text-align: center，子div仍靠左 - 用
text-align: center尝试居中一个图片（img默认是 inline，但常被设成display: block后失效） - Flex 或 Grid 容器里还加
text-align，纯属冗余
line-height 居中只适用于单行文本，且依赖高度固定
line-height 配合 height 实现单行垂直居中，本质是让行高撑满容器，再靠基线对齐把文字“顶”到中间。但它有硬性前提：
- 容器必须有明确的
height（不能是auto或由内容撑开） - 文本必须是单行（换行会破坏效果）
- 字体大小不能动态变化（否则
line-height值需同步调整）
示例：让单行按钮文字垂直居中
立即学习“前端免费学习笔记（深入）”；
.btn {
height: 40px;
line-height: 40px; /* 必须和 height 相等 */
text-align: center;
}如果按钮文字变两行，line-height: 40px 会让行间距变成 40px，整体高度爆炸——这不是居中，是错位。
真正可靠的居中组合：flex + text-align
现代布局中，最稳妥的做法是用 display: flex 控制容器自身对齐，再保留 text-align 处理内部换行文本的对齐逻辑：
-
justify-content: center→ 水平居中子元素（不管它是 inline 还是 block） -
align-items: center→ 垂直居中子元素（要求容器有明确高度或 flex 主轴方向合适） -
text-align: center→ 保留在子元素上，确保多行文本内部也居中（比如按钮内两行文字）
示例：一个可容纳多行文字、完全居中的卡片标题
.card-title {
display: flex;
justify-content: center;
align-items: center;
height: 80px;
text-align: center; /* 子元素如果是 p 标签，这行才起作用 */
}注意：text-align 在 flex 容器上本身无效；要写在 flex 子元素（如 p）上才有意义。
容易被忽略的细节：inline 元素的 line-height 和 vertical-align
当 line-height 生效时，实际起作用的是行框（line box）的高度和其中内容的 vertical-align 值。默认 vertical-align: baseline，所以即使设置了 line-height，如果容器里混有图标、input 或其他 inline 元素，它们的基线不一致，会导致视觉偏移。
- 解决办法：统一设
vertical-align: middle或vertical-align: top - 特别注意
img标签：默认 inline + baseline 对齐，下方留白，常被误认为“没居中” - 不要依赖
line-height居中含vertical-align: bottom的元素
一句话收尾：text-align 是文本对齐，不是元素定位；line-height 是行高控制，不是垂直居中 API。真要居中，优先用 flex 或 grid，别硬凑这两个属性。
