多行文字垂直居中必须用align-items: center，单行固定高可用line-height；失效主因是父容器无明确高度（如height或min-height），导致缺乏居中参照基准。
直接说结论：多行文字必须用 align-items: center，单行且高度固定时 line-height 可以凑合，但混用会失效，而且 line-height 在 flex 容器里根本不起作用。
为什么 align-items: center 对文字没反应？
不是属性写错了，是容器没“可居中的依据”。align-items 是按容器的交叉轴（默认是垂直方向）对齐子元素，如果容器自身高度是 auto（比如没设 height 或 min-height），那它就等于内容撑出来的高度，此时“居中”失去参照基准——文字看起来原地不动，其实是容器自己塌了。
- 给父容器加
height: 120px或min-height: 4em，立刻生效 - 要填满视口？用
height: 100vh，但注意 iOS Safari 旧版本对min-height: 100vh支持不稳 - 别把文字包在多层
div里再只对最外层设flex——确保文字容器（如p或div）是display: flex的直接子元素 - 清除默认
margin：p { margin: 0; }，否则上下边距会干扰视觉居中
为什么不能靠 line-height 撑多行文字？
line-height 控制的是每行文本的行框高度，不是整个文本块的位置。设 line-height: 100px，只是让每一行都拉高到 100px，多行时它们依然从顶部开始堆叠，底部大片留白——这不是居中，是错觉。
- 仅适用于单行 + 固定容器高度 + 无
padding干扰的场景（例如按钮） - 若容器有
padding: 10px且height: 60px，实际内容区高是 40px，line-height应设为 40px，不是 60px - 在
display: flex容器中，line-height对子元素的 flex 对齐完全无效——浏览器会标记为 “not applicable” - 响应式下更危险：窗口缩小时文字换行，
line-height立刻露馅
align-items: center 和 justify-content: center 怎么配着用？
两者作用轴不同：align-items 管交叉轴（默认垂直），justify-content 管主轴（默认水平）。想同时水平+垂直居中，两个都得写。
立即学习“前端免费学习笔记（深入）”；
- 默认
flex-direction: row时：align-items: center垂直居中，justify-content: center水平居中 - 如果改了
flex-direction: column，角色互换：align-items变成管水平，justify-content才管垂直 - 文字本身是块级（如
p），不用额外设display: block；但如果是span，建议显式加display: block避免 inline 行为干扰 - 别给子元素设
vertical-align—— flex item 不吃这一套
最容易被忽略的一点：IE11 对 min-height 容器里的 align-items: center 渲染不稳定，测试时务必打开开发者工具看 computed 样式是否真生效；移动端老版 Safari（9.1 以下）也有类似问题，能用 height 就别赌 min-height。
