优先用min-height: 100vh而非height: 100vh，因iOS Safari地址栏收放会动态重算vh但不触发重排，导致内容抖动、截断或留白；justify-content和align-items需父容器有明确交叉轴尺寸才能生效。
别用 height: 100vh 做全屏容器高度，优先写 min-height: 100vh —— 否则 iOS Safari 和部分安卓浏览器下拉刷新或地址栏收起时，内容会抖动、截断或留白。
为什么 justify-content: center + align-items: center 不生效
两个对齐属性都依赖“父容器有明确的交叉轴尺寸”。justify-content 控制主轴（默认水平），align-items 控制交叉轴（默认垂直），而后者需要父容器在垂直方向上有可计算的高度基准。
- 只写
height: 100vh：视口高度变化时（如 Safari 地址栏弹出），vh值实时重算，容器高度塌缩，align-items: center失去参考 - 漏掉
min-height: 100vh或等效高度声明：父容器高度为auto，flex 项按默认stretch拉伸或贴顶显示 - 父级
html/body没设高度：height: 100%会一路向上失效，最终 fallback 到内容高度
min-height: 100vh 要搭配哪些必要样式
仅设 min-height 不够，还需确保 flex 行为被正确触发且不被干扰：
- 父容器必须设
display: flex（不能只在子元素上设） - 必须同时声明
justify-content: center和align-items: center—— 少一个就只居中一个方向 - 加
background-repeat: no-repeat和background-size: cover，否则背景图可能平铺或拉伸变形 - 若需兼容 iOS 8–9，补一行
min-height: -webkit-fill-available作后备
文字和背景图共存时的常见错位
把背景图和 flex 居中逻辑混在一个元素上，容易引发布局冲突：
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
.hero { background: url(...) center/cover; display: flex; justify-content: center; }→ 文字若过宽，会挤压背景图可视区域 - 背景图应设在外层容器（负责撑高+铺满），居中逻辑交给内层或同一层的子元素（负责排布内容）
- 纯文本子元素建议包一层
<div>或设display: block，避免浏览器按基线对齐导致视觉偏移 - 右侧留白异常？检查是否没限制内容宽度 —— 加
max-width: min(1200px, 90%)防止 flex 行整体被撑开
真正容易被忽略的是：align-items: center 的生效前提不是“写了就行”，而是“父容器在交叉轴方向有确定的尺寸边界”；这个边界一旦被视口动态变化打破，居中就只是看起来有效而已。
