最稳妥做法是用 min-height: 100vh，而非 height: 100% 或 height: 100vh；全屏背景图优先用 background-position: center center 和 background-size: cover，而非 flex 居中。
Flex容器怎么占满整个视口高度
直接设 height: 100vh 是最稳妥的做法，height: 100% 会失效——因为父元素（比如 body）默认没高度，百分比失去参照。别信“只要给 html, body { height: 100% } 就行”，实际项目里常被重置样式或第三方库干扰，100vh 更可靠。
常见错误现象：flex 容器看起来没撑开，背景图只在内容区域显示，上下留白；检查 computed height，大概率是 0 或远小于视口。
- 必须确保容器本身有明确高度：用
min-height: 100vh比height: 100vh更安全，允许内容超出时自然滚动 - 避免对
html或body设overflow: hidden，否则100vh在 iOS Safari 中可能被地址栏遮挡导致计算偏差 - 如果容器是
position: fixed，100vh依然有效，但需注意 z-index 和滚动行为冲突
背景图垂直居中用 flex 还是 background-position
两者都能实现，但目的不同：flex 居中控制的是「容器内元素」，background-position 控制的是「背景图自身在容器中的锚点」。全屏背景图场景下，通常不需要 flex 居中子元素，而是让背景图自己居中——更轻量、无 DOM 依赖、不触发重排。
使用场景：你只是想铺一张图当背景，不是要居中一个 <img alt="CSS如何实现全屏背景图垂直居中布局_通过Flex容器占满视口高度css" > 标签或 div 块。
立即学习“前端免费学习笔记（深入）”；
- 优先用 CSS 背景方案：
background-image: url(...); background-size: cover; background-position: center center; - 如果非要用 flex 居中一个
<img alt="CSS如何实现全屏背景图垂直居中布局_通过Flex容器占满视口高度css" >，得加object-fit: cover和width: 100%; height: 100%，否则图片会拉伸变形或留白 -
background-position: center等价于center center，写两个值更清晰，避免 Safari 旧版本解析歧义
cover 和 contain 在全屏背景下的实际表现差异
background-size: cover 保证填满容器且不露背景色，但可能裁剪边缘；contain 保证完整显示整张图，但必然留白——全屏背景几乎不用 contain，除非设计明确要求看到图的全部内容（比如信息图）。
性能影响：两者渲染开销一致，但 cover 在高 DPR 屏幕上可能触发更复杂的缩放插值计算，不过人眼几乎不可察。
- 移动端要注意：某些安卓 WebView 对
cover的缩放精度有轻微偏差，可加background-repeat: no-repeat避免意外平铺 - 如果图宽高比和视口差异极大（比如超宽横幅图），
cover可能裁掉关键内容，此时应配合background-position: top或具体像素偏移手动微调 - 不要用
100% 100%代替cover，它会强制拉伸失真，且不保持宽高比
为什么 flex + background-image 组合容易出问题
典型错误是给 flex 容器同时设了 background-image 和 justify-content: center; align-items: center，以为这样能“双重保险”。其实 flex 居中对背景图完全无效，反而可能因子元素占位或 margin 干扰容器尺寸计算。
容易踩的坑：在调试时发现背景图位置飘忽，反复改 align-items 却没反应——那说明你在调一个根本不起作用的属性。
- 确认是否真的需要 flex：如果只是背景，删掉所有 flex 相关声明，专注 background 系列属性
- 如果容器里还有文字/按钮等需要居中的内容，flex 可以保留，但背景图必须单独设置在该容器上，且不依赖 flex 居中逻辑
- 用 DevTools 的 Elements 面板直接看 computed
background-position和background-size，比肉眼判断靠谱得多
真正麻烦的是视口变化时的响应行为——比如横竖屏切换、iOS Safari 地址栏收放、PWA 添加到主屏幕后的 viewport 缩放。这些场景下 100vh 和 background-position 都可能临时错位，得靠 @media (orientation: landscape) 或 resize 事件做兜底，但多数情况，老老实实用 min-height: 100vh; background: ... center / cover no-repeat; 就够了。
