line-height垂直居中仅适用于固定高且单行文字容器，需设为内容区高度并配合white-space: nowrap；多行或动态场景应优先使用display: flex+align-items: center。
单行文字用 line-height 垂直居中，但仅限固定高容器
当容器高度确定、且只有一行文字时，line-height 是最轻量的方案：直接设为与容器高度相等即可。比如容器高 40px，就写 line-height: 40px。
常见错误是忽略“单行”前提——一旦文字换行或内容动态变化，line-height 会把每行都拉高，导致整体错位甚至溢出。
- 必须配合
white-space: nowrap防止意外换行 - 不能和
padding混用：若容器已有padding: 10px，实际内容区高是20px，那line-height应设为20px，不是40px - 不兼容弹性高度（如
min-height或内容撑开）
多行或响应式场景优先用 display: flex
flex 是目前最可靠、语义最清晰的垂直居中方式，尤其适合动态内容或未知高度容器。
关键在于父容器设置：display: flex + align-items: center。如果还需水平居中，再加 justify-content: center。
立即学习“前端免费学习笔记（深入）”；
- 子元素无需设置高度或
line-height，哪怕它是<p></p>、<span></span>或带内边距的块级元素，都能自然居中 - 注意避免父容器被设了
flex-direction: column后又漏写justify-content，否则垂直方向失效 - 旧版 safari（
9.1以下）对align-items: center在min-height容器中支持不稳定，需测试
不推荐用 vertical-align 居中文本
vertical-align 只对 inline、inline-block 元素及表格单元格生效，对块级元素（如默认 div、p）完全无效。很多人误以为给文字容器设 vertical-align: middle 就能居中，结果毫无反应。
- 若硬要用，得先改子元素为
display: inline-block，再设vertical-align: middle，同时父容器还得有line-height基准（比如设font-size: 0清除间隙），非常绕 - 在 Flexbox 普及的今天，这种写法已无必要，维护成本高且行为难预测
遇到 flex 不生效？先检查这三点
Flex 垂直居中失败，通常不是语法问题，而是布局上下文干扰：
- 父容器是否被设了
position: absolute却没给height或top/bottom？此时它可能高度为0，flex 无作用域 - 子元素是否意外设置了
margin: auto？在 flex 容器里，margin: auto会覆盖align-items，造成居中失效 - 是否有 css 重置或框架样式（如 bootstrap 的
.d-flex）覆盖了你的align-items？用浏览器开发者工具逐层检查计算值
真正麻烦的从来不是怎么写，而是容器高度来源是否明确、是否被其他规则静默劫持。