align-items: center没效果最常见的原因是父容器缺乏交叉轴高度，需设height或min-height；同时须确认display: flex已声明且flex-direction未导致主/交叉轴混淆。
align-items: center 为什么没效果
最常见的现象是写了 align-items: center，但子元素依然贴着顶部。根本原因不是属性写错了，而是父容器在交叉轴（默认是垂直方向）上没有可计算的高度——height: auto 且内部内容没撑开它，浏览器根本不知道“中间”在哪。
必须确保父容器有明确高度，比如：
-
height: 300px（固定像素） -
min-height: 100vh（比height: 100vh更安全，避免内容超长被截断） -
height: 100%（前提是所有父级都有明确高度，否则无效）
另外检查是否漏写了 display: flex——align-items 只在 Flex 容器上生效，加在子元素上完全没用。
justify-content 和 align-items 到底谁管垂直方向
答案取决于 flex-direction。默认值是 row，此时主轴水平、交叉轴垂直，所以：
立即学习“前端免费学习笔记（深入）”；
-
justify-content: center→ 控制**水平居中** -
align-items: center→ 控制**垂直居中**
如果改成 flex-direction: column，两者作用就反过来了：justify-content 管垂直，align-items 管水平。别凭感觉记，看 flex-direction 就行。
常见错误是只写 justify-content: center 就以为能垂直居中，结果元素水平居中了，却卡在顶部不动。
纯文本垂直居中要不要套 Flex 容器
要看场景：
- 单行文本 + 固定高度容器 → 直接用
line-height: 容器高度，简单高效，不用 Flex - 多行文本、带图标、或内容结构不确定 → 把文字容器设为
display: flex，再加align-items: center和justify-content: center
注意：align-items 居中的是整个子元素（比如一个 <p>），不是它内部的文字基线。如果只给文本加 Flex，又没重置 margin 或 line-height，字体渲染差异可能导致视觉偏移，肉眼看着“差不多”，其实没真居中。
移动端 Safari 的 100vh 跳变问题
在 iOS Safari 中，地址栏收起/展开时，height: 100vh 会重新计算，导致容器高度突变、内容上下跳动。这不是 align-items 的问题，而是高度基准不稳定。
解决方案是换用更鲁棒的单位：
-
min-height: -webkit-fill-available（Safari 专用，兼容性好） -
min-height: 100dvh（2023 年后标准，Chrome/Firefox/Safari 都支持，但 IE 和旧版 Safari 不认） - 组合写法：
min-height: 100vh; min-height: -webkit-fill-available;，让老 Safari 降级使用后者
只要容器高度一抖，align-items: center 就会跟着重算位置——这个细节在真机调试前很容易被忽略。
