flex容器中纯文本不会垂直居中，因文本节点不参与flex布局；需包裹<span>等标签使其成为弹性项，再用align-items:center实现居中。
flex容器里文字往上/往下跑，不是居中？
默认情况下，display: flex 的容器不会自动让内部文字垂直居中——它只对齐“弹性项”（比如 <div>、<span> 这类块级或行内元素），而纯文本节点（text node）没有自己的 align-items 行为，会受行高、字体度量、基线对齐等底层机制影响，看起来像“偏了”。
常见错误现象：align-items: center 写了但文字还是贴顶或下沉；用 justify-content: center 只能水平居中，对垂直没用；给文字外层加 <span> 后突然居中了——其实不是 span 有魔法，是它变成了一个可被 flex 控制的“项”。
- 纯文本直接放在
<div style="display: flex">文字</div>中，flex 不把它当子项，align-items对它无效 - 必须包一层标签（如
<span>、<p>、<div>），才能参与 flex 布局计算 - 如果父容器高度固定，子元素又没设
height或line-height，浏览器会按字体的ascent/descent渲染，视觉上就“不居中”
align-items 和 line-height 混用时谁说了算？
align-items 控制的是 flex 子项的交叉轴对齐方式，而 line-height 影响的是行内内容（尤其是单行文本）的行框高度和基线位置。两者作用层级不同，但会叠加出意外效果。
典型场景：按钮内文字看起来“偏下”，明明写了 align-items: center，还加了 line-height: 2em —— 实际上 line-height 把行框拉高了，文字在行框里按基线对齐，而 align-items: center 是把整个行框（作为 flex item）居中，结果就是“行框居中了，但文字在行框里靠下”。
立即学习“前端免费学习笔记（深入）”；
- 优先用
align-items: center+ 包裹标签，而不是依赖line-height垂直居中 - 若必须用
line-height（如纯文本按钮），确保父容器高度与line-height一致，且子元素是行内级（display: inline或未设置 display） - 不要对 flex 容器同时设
line-height和align-items，前者会被忽略或干扰后者
文字在 flex 容器中左右不对齐？检查 white-space 和 text-align
flex 容器的 justify-content 控制子项的主轴对齐，但它不管子项内部的文字对齐。如果子项是 <span> 或 <p>，里面的文字是否居中，取决于该元素自身的 text-align 和 white-space。
容易踩的坑：给 flex 容器设了 justify-content: center，子 <span> 也居中了，但里面文字右对齐了——因为 <span> 继承了祖先的 text-align: right，或者被 CSS reset 干扰了。
-
text-align必须写在 flex 子元素上（如<span>），不能只写在 flex 容器上 - 避免
white-space: nowrap和text-overflow: ellipsis在未设宽度的 flex 子项中使用，会导致布局收缩异常 - 如果子项是
<div>，默认display: block，text-align生效；如果是<span>，需确认它没被强制设成display: inline-flex等导致text-align失效
IE11 下 flex 文字对齐失效的兼容性处理
IE11 的 flex 实现对文本节点更“严格”，连包裹了 <span> 的文字都可能因缺少 flex: 0 0 auto 或 min-width: 0 而换行或错位，尤其在缩放或 RTL 场景下。
不是所有 flex 属性都能降级，但文字对齐问题往往卡在“子项尺寸未明确”这个点上。
- 给 flex 子元素（如
<span>）显式加flex: 0 0 auto，防止 IE11 自作主张拉伸 - 遇到文字被截断或挤到右侧，加
min-width: 0阻止 IE11 的最小宽度保护逻辑 - 避免在 IE11 中对 flex 容器使用
align-items: baseline，它对字体度量计算不一致，改用center更可靠
text-align 或 white-space——这些细节不查 computed styles 根本看不出来。 
