flex容器中文字垂直居中必须设置height或min-height，且文字所在元素须为flex容器的直接子元素；若为column布局，则需用justify-content:center实现垂直居中。
flex 容器中文字垂直居中必须设 height 或 min-height
只写 display: flex 和 align-items: center，文字大概率不会垂直居中——因为 flex 项默认按内容高度撑开，而父容器没有明确高度时，align-items 实际无参照基准。
常见现象：文字紧贴顶部，或在小屏幕下偏上，看似“没生效”。
- 给父容器加
height: 100vh（全屏）或具体像素值（如height: 60px） - 若高度不确定，用
min-height替代height更安全 - 避免仅靠
flex: 1或width: 100%推导高度——它们不触发垂直对齐所需的块级高度上下文
文本本身不是 flex 项时 align-items 不起作用
align-items 控制的是 flex 容器的**直接子元素**（即 flex items）在交叉轴上的位置。如果文字是子元素的文本节点（比如 align-items 直接影响。
正确结构应确保文字所在元素是 flex 容器的直系子元素：
立即学习“前端免费学习笔记（深入）”；
Hello
错误写法（文字在嵌套 div 里，且该 div 没设 flex 或未参与对齐）：
Hello
此时 如果只是单行、固定高度容器内的垂直居中， 注意： 当容器设了 想在 column 布局中让文字垂直居中，得配合 Centered vertically 容易混淆点：display: flex 和 align-items: center。
单行文本用 line-height 有时更轻量
line-height 仍是零配置、无兼容性风险的选择：line-height 对多行文本会拉高行距，导致整体高度失控；而 flex + align-items: center 天然支持多行，且不依赖字体度量。
line-height
line-height 和 align-items: center 可能造成意外偏移align-items: center 在 flex-direction: column 下行为不同
flex-direction: column，交叉轴就变成水平方向，此时 align-items: center 控制的是**水平居中**，而非垂直。justify-content: center（主轴对齐）：
实际项目里最常漏掉的是父容器高度约束，以及误以为文本节点本身能被 flex 属性直接控制。这两个点卡住，再调十遍 align-items 始终作用于交叉轴，和 flex-direction 强相关align-items，column 时靠 justify-content
align-items 都没用。
