flex垂直居中失效主因是父容器无明确高度；line-height仅适用于单行文本，混用flex会冲突；grid的place-items: center更可靠。
flex 垂直居中不生效的常见原因
用 display: flex + align-items: center 居中子元素，却没效果，大概率是父容器没撑开高度。Flex 布局只对「有明确高度」或「能自然计算出高度」的容器生效。
- 父元素高度为
auto（比如没设height或min-height），且子元素没内容撑高，那它实际高度就是 0 —— 此时align-items: center没参考系，自然无效 - 父元素被设置了
position: absolute但没配top/bottom，也可能导致高度塌陷 - 子元素用了
float或position: absolute，会脱离 Flex 格式化上下文，不再受align-items控制
解决办法：确保父容器有可计算的高度，例如：
.container {
display: flex;
align-items: center;
justify-content: center;
height: 200px; /* 必须有明确高度 */
/* 或 min-height: 200px; */
}line-height 实现单行文本垂直居中为何有时失效
line-height 居中只适用于**单行纯文本**，原理是让行高和容器高度一致，使文字基线居中。一旦内容换行、加了 padding、用了 vertical-align 或嵌套了 inline-block 元素，就容易失准。
- 容器设置了
padding，但没从line-height中扣除，导致视觉偏移 - 文字本身有
font-size差异或使用了非标准字体，基线位置浮动 - 误用于块级元素（如
div）而没转成inline-block或inline
安全用法示例（仅限单行）：
立即学习“前端免费学习笔记（深入）”；
.box {
height: 60px;
line-height: 60px; /* 和 height 严格相等 */
font-size: 14px;
text-align: center;
}
.box span {
display: inline-block;
vertical-align: middle; /* 配合 line-height 更稳 */
}flex 与 line-height 混用导致冲突
两者混用不是叠加效果，而是相互干扰。比如给父容器设了 display: flex，又同时写 line-height: 50px，这个 line-height 对 flex 子项完全无效 —— 因为 flex 子项已脱离常规行内流，line-height 失去作用对象。
- Flex 容器里的子元素，
line-height只影响其自身内部的行距（如果它是多行文本块），不影响它在 flex 主轴/交叉轴上的位置 - 想微调 flex 子项内的文字对齐，应在子项上单独设
line-height或padding，而不是在父容器上堆叠 -
浏览器 DevTools 里检查 computed styles，常能看到
line-height被标记为 “not applicable”
更可靠的替代方案：grid 布局
当 flex 在某些场景（如全屏居中、响应式高度）下仍不稳定时，display: grid 是更简洁的解法，兼容性也已覆盖所有现代浏览器（Chrome 66+、Firefox 63+、Safari 14+）。
- 不需要父容器预设高度，配合
min-height: 100vh即可撑满视口 -
place-items: center一行搞定水平+垂直居中 - 不会因子元素
float或position而失效
示例：
.container {
display: grid;
place-items: center;
min-height: 100vh;
margin: 0;
}真正卡住的时候，别硬调 flex 的 margin 或 transform 偏移，先确认父容器是否具备参与布局的高度基准 —— 这个点最容易被忽略，也最常白忙半天。
