flex容器中文字垂直居中失效主因是基线与行高干扰视觉判断；align-items仅控制项目整体居中，不干预内部文字渲染；line-height=容器高度仅对单行inline元素有效，且受字体ascent/descent、padding/border及父级align-items影响。
flex 容器中文字垂直居中失效的常见原因
flex 布局下文字看起来“没对齐”，往往不是 align-items 没起作用，而是文字本身的基线（baseline）和行高（line-height）干扰了视觉判断。特别是当容器内混有图标、按钮或不同字号文字时，align-items: center 会让 flex 项目整体沿交叉轴居中，但每个项目内部的文字仍按自身 line-height 和 font-size 渲染，导致视觉错位。
为什么设置 line-height 等于容器高度有时也不管用
这种写法只对单行纯文本有效，且前提是元素是 inline 或 inline-block；在 flex 项目中，如果子元素是 div 或设置了 display: block，line-height 不会触发垂直居中效果。更关键的是：字体的 ascent 和 descent 区域不等于 line-height 的上下留白，尤其在使用 icon font 或 variable font 时，实际字形可能上浮或下沉。
-
line-height控制的是行框（line box）高度，不是文字内容的绝对居中锚点 - 若子元素有
padding、border或margin，会进一步偏移视觉中心 - 某些字体（如
system-ui在 macOS 上）默认font-feature-settings: "ss01"可能影响基线对齐
真正可靠的对齐组合方案
优先用 flex 嵌套 + 显式对齐控制，避免依赖 line-height：
.container {
display: flex;
align-items: center; /* 容器级交叉轴居中 */
}
<p>.text-wrapper {
display: flex;
flex-direction: column;
justify-content: center; /<em> 子容器内部再居中 </em>/
line-height: 1; /<em> 防止多行撑开 </em>/
margin: 0;
padding: 0;
}</p><p>.text-wrapper > <em> {
margin: 0;
padding: 0;
align-self: center; /</em> 单个文字/图标也单独居中 */
}若必须单层结构，可加 vertical-align: middle 配合 line-height，但仅限 inline-level 元素：
立即学习“前端免费学习笔记（深入）”；
<span class="icon"></span><span class="label" style="vertical-align: middle; line-height: 24px;">文字</span>
注意：vertical-align 对 flex 项目无效，只能用于 inline 元素或 table-cell。
调试时该检查哪些具体值
打开浏览器开发者工具，选中文字元素，依次确认：
- 计算后的
height和line-height是否一致（不一致就别指望靠line-height居中） - 是否意外继承了父级的
font-size或transform: scale() - 是否存在伪元素（
::before/::after）占位却没设content: "" - 检查
getComputedStyle(el).fontFamily返回的实际字体，有些字体基线差异极大（比如IntervsRoboto Mono）
最易被忽略的一点：flex 项目默认 align-self: auto，但如果父容器设了 align-items: flex-start，又没在子元素上显式覆盖，那文字就根本不会垂直居中——哪怕你给子元素写了 line-height: 100px 也没用。
