17370845950

Flex 垂直居中失败主因是 line-height 干扰：固定 line-height 会覆盖 align-items: center 的逻辑，需移除或设为 normal；同时确保父容器 display: flex、有明确高度，并排查字体与 box-sizing 影响。

文本在 Flex 布局中垂直居中失败，常见原因之一是 父容器或文本自身设置了固定的 line-height，它会强行撑开行高、覆盖 Flex 的对齐逻辑，导致 align-items: center 看似失效。

检查并移除不必要的 line-height

Flex 容器内的文本（如 、

或内联元素）若被设了固定 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% 的问题就解决了。