flex容器未设高度时align-items: center不生效，因缺乏垂直居中参照基准；需显式设置height或min-height，且避免纯文本直插、IE11渲染bug等常见陷阱。
flex容器高度没设，align-items: center 就不生效
很多同学写了 display: flex 和 align-items: center，但文字就是不垂直居中——八成是容器本身没高度。Flex 的 align-items 是相对于容器的交叉轴（这里是纵轴）起作用的，如果容器高度由内容撑开（比如默认的 height: auto），那“居中”就失去了参照基准。
实操建议：
- 给 flex 容器显式设置
height或min-height，比如height: 100px或min-height: 4em - 若容器需填满父级，优先用
height: 100%配合父级有明确高度，或改用height: 100vh（注意 viewport 单位兼容性） - 避免依赖
line-height模拟居中，它对多行文本完全失效
align-items 对多行文本有效，但得配 flex-direction: column？
不用。默认 flex-direction: row 下，align-items: center 控制的是每行内部子元素在交叉轴（即垂直方向）的位置，对多行 span 或换行的 p 文本依然生效——前提是这些文字在一个 flex 子项里（比如一个 div 包着所有文字）。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 把每行文字拆成多个独立 flex 子项（如多个
div），此时align-items居中的是每个子项自身，不是整体文本块 - 容器内直接放文本节点（无包裹标签），Flex 会把纯文本转为匿名 flex 项，行为不可控，务必用标签包裹
- 子项设置了
align-self: flex-start，会覆盖容器的align-items
多行文本内容溢出时，align-items: center 还能保持居中吗？
能，但前提是容器高度固定且足够容纳内容；否则内容被裁剪或滚动，视觉上就“偏了”。这里的关键不是 align-items 失效，而是容器高度和内容高度的关系变了。
实操建议：
- 用
overflow: hidden+text-overflow: ellipsis实现单行省略；多行省略需配合-webkit-line-clamp，但此时垂直居中会失准，慎用 - 若需响应式多行居中，推荐用
min-height而非height，留出内容增长空间 - 极端情况（如动态加载内容）可搭配 JS 监听
scrollHeight调整容器高度，但多数场景没必要
IE11 下 align-items: center 垂直居中经常错位
这是 IE11 Flex 实现的已知缺陷：当 flex 容器含 padding 或子项有 margin 时，交叉轴计算常出偏差。不是写法错，是渲染引擎 bug。
绕过方案：
- 移除容器的
padding，改用子项的margin模拟（注意margin在 IE11 中对 flex 项的支持更稳） - 避免在子项上同时用
margin和padding，优先用其中一种 - 终极兜底：对 IE11 单独用
display: table-cell+vertical-align: middle，但需确保父容器是display: table
height 可能被意外重置或继承为 auto。先确认容器真有高度，再调 align-items。 
