Flex 垂直居中失败主因是 line-height 干扰：固定 line-height 会覆盖 align-items: center 的逻辑，需移除或设为 normal；同时确保父容器 display: flex、有明确高度，并排查字体与 box-sizing 影响。
文本在 Flex 布局中
垂直居中
失败，常见原因之一是
父容器或文本自身设置了固定的
，它会强行撑开行高、覆盖 Flex 的对齐逻辑，导致
看似失效。
检查并移除不必要的 line-height
Flex 容器内的文本（如
、
或内联元素）若被设了固定
（比如
或
），会破坏基线对齐和内容盒高度计算。Flex 的垂直居中依赖内容盒的自然高度，而固定
可能让文本“卡”在行框顶部或底部。
审查文本元素及其祖先的 CSS，查找
声明
优先用
或直接删掉该属性（
浏览器
默认值通常更兼容 Flex）
若需控制行距，建议改用
或调整
配合 Flex 自身的
确认 flex 容器设置完整
仅靠
不够，还需确保容器是真正的 Flex 上下文且尺寸可控：
父容器必须有
或
若子元素是单行文本，推荐同时设置
+
（更直观）
容器需有明确高度（如
）或能由内容撑开；否则
缺乏参照基准
警惕字体度量与 box-sizing 干扰
某些字体自带上/下留白（ascent/descent），配合
或
可能造成视觉偏移，看似没居中：
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
立即学习
“
前端免费学习笔记（深入）
”；
用浏览器开发者工具选中文字，查看实际
和
边界
临时加
到文本元素，观察是否被“垫高”
可尝试
排查字体特异性问题
基本上就这些。Flex 垂直居中本身不复杂，但容易被隐式样式（尤其是
）悄悄破坏。先清掉干扰项，再验证容器结构，90% 的问题就解决了。
line-heightalign-items: centerline-heightline-height: 20pxline-height: 1line-heightline-heightline-height: normalpaddingfont-sizealign-itemsalign-items: centerdisplay: flexdisplay: inline-flexflex-direction: columnjustify-content: centerheight: 100pxalign-items: centerbox-sizing: border-boxpaddingcontent boxline boxbackground: rgba(0,0,0,0.1)font-family: system-ui, sans-serifline-height