Flex 垂直居中失败主因是 line-height 干扰：固定 line-height 会覆盖 align-items: center 的逻辑，需移除或设为 normal；同时确保父容器 display: flex、有明确高度，并排查字体与 box-sizing 影响。
文本在 Flex 布局中垂直居中失败，常见原因之一是 父容器或文本自身设置了固定的 line-height，它会强行撑开行高、覆盖 Flex 的对齐逻辑，导致 align-items: center 看似失效。
检查并移除不必要的 line-height
Flex 容器内的文本（如 <span></span>、<p></p> 或内联元素）若被设了固定 line-height（比如 line-height: 20px 或 line-height: 1），会破坏基线对齐和内容盒高度计算。Flex 的垂直居中依赖内容盒的自然高度，而固定 line-height 可能让文本“卡”在行框顶部或底部。
- 审查文本元素及其祖先的 CSS，查找
line-height声明 - 优先用
line-height: normal或直接删掉该属性（浏览器默认值通常更兼容 Flex） - 若需控制行距，建议改用
padding或调整font-size配合 Flex 自身的align-items
确认 flex 容器设置完整
仅靠 align-items: center 不够，还需确保容器是真正的 Flex 上下文且尺寸可控：
- 父容器必须有
display: flex或display: inline-flex - 若子元素是单行文本，推荐同时设置
flex-direction: column+justify-content: center（更直观） - 容器需有明确高度（如
height: 100px）或能由内容撑开；否则align-items: center缺乏参照基准
警惕字体度量与 box-sizing 干扰
某些字体自带上/下留白（ascent/descent），配合 box-sizing: border-box 或 padding 可能造成视觉偏移，看似没居中：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具选中文字，查看实际
content box和line box边界 - 临时加
background: rgba(0,0,0,0.1)到文本元素，观察是否被“垫高” - 可尝试
font-family: system-ui, sans-serif排查字体特异性问题
基本上就这些。Flex 垂直居中本身不复杂，但容易被隐式样式（尤其是 line-height）悄悄破坏。先清掉干扰项，再验证容器结构，90% 的问题就解决了。
