背景图居中靠background-position，非justify-content或align-items；需分离背景容器与内容层，用position:relative/z-index显式控制层叠顺序，并注意iOS Safari的渲染差异。
为什么 justify-content 和 align-items 会“吃掉”背景图
不是居中逻辑错了，是背景图和内容被塞进了同一个渲染层。当父容器同时设了 background-image 和 display: flex，又没控制层叠顺序，子元素（比如文字、按钮）默认以 z-index: auto 渲染——它会盖在背景图上，但若子元素透明或尺寸小，人眼反而觉得“背景被切掉了”。真正的问题常出在：背景图本身没居中、容器没占满视口、或子元素用了 position: absolute 后脱离文档流却忘了调 z-index。
背景图居中必须用 background-position，不是靠 Flex
Flex 的 justify-content 和 align-items 管的是子元素位置，跟背景图无关。背景图的锚点由 background-position: center center 控制，缩放行为由 background-size: cover 决定。这两条必须写在外层容器上，且不能被子元素的定位干扰：
- 错误写法：
.hero { background: url(...) center/cover; display: flex; justify-content: center; }→ 如果子元素写了position: absolute且没设z-index，它可能视觉上“挡住”背景，实则是自身没宽高，留出大片透明区，让人误以为背景缺失 - 正确结构：外层容器负责背景 + 视口高度，内层包裹内容并用 Flex 居中，两者分离
- 必须加
background-repeat: no-repeat，否则小图会平铺，覆盖效果假象更严重
用 z-index 和 position 显式分层时的三个硬约束
只有当你非得把文字/图标等元素用 position: absolute 叠在背景图上（比如做 banner 标题），才需要动 z-index。此时必须满足：
- 父容器设
position: relative，否则absolute子元素会相对于body定位，完全失控 - 背景图所在元素（通常是父容器本身）不能设
z-index，让它保持自然层叠顺序（即最底层） -
absolute子元素必须显式设z-index: 1或更高，且不能依赖默认值——z-index: auto在 flex 容器里不触发新层叠上下文，容易被其他元素穿透 - 如果子元素还用了
transform（比如scale(0.95)），它会隐式创建层叠上下文，可能让z-index失效，此时要给父容器也加z-index: 0
移动端 iOS Safari 下 z-index 失效的典型表现与修复
iOS Safari 对 position: fixed 和 z-index 的组合特别敏感，常见现象是背景图在滚动时突然“闪现”或文字层错位。这不是 Flex 的锅，而是浏览器渲染层策略差异：
立即学习“前端免费学习笔记（深入）”；
- 避免对背景容器用
position: fixed；改用min-height: 100vh+background-attachment: scroll - 如果必须用
fixed，得加backface-visibility: hidden强制 GPU 加速，防止层叠断裂 - 检查是否在媒体查询里漏写了
z-index，iOS 会严格按断点重算层叠顺序，不会继承上一个断点的值 - 真机调试时，用 Safari 开发者工具勾选 “Show layer borders”，一眼看出哪些元素意外创建了新层叠上下文
z-index，也得先确认父容器有没有 position、有没有隐式层叠上下文、以及背景图本身是不是真的居中了——否则所有居中操作，都在给幻觉打补丁。 
