用 min-height: 100vh + display: flex + justify-content: center + align-items: center 可实现内容居中，但需分离背景与内容居中逻辑；height: 100vh 在移动端因地址栏动态变化导致视口高度波动，min-height: 100vh 更稳健，高精度可用 100dvh；justify-content 和 align-items 需同时设置且父容器必须有明确交叉轴尺寸，否则不生效；背景图应通过 background-position 和 background-size 控制，不可与 Flex 居中混用；须重置 html/body 边距并确保 Flex 容器为最外层业务容器。
直接用 min-height: 100vh + display: flex + justify-content: center + align-items: center 就能稳住，但必须把背景和内容居中逻辑分开处理，否则背景图会被内容挤压变形。
为什么 height: 100vh 在移动端会出问题
iOS Safari 和部分安卓浏览器在地址栏收起/弹出、下拉刷新时会动态重算视口高度，height: 100vh 容器会跟着忽大忽小——内容可能被截断，或底部突然留白。这不是 bug，是规范行为。
-
min-height: 100vh是兜底方案：保证至少一屏高，内容多时自然延展 - 若需更高精度，可用
min-height: 100dvh（Chrome 105+/Safari 16.4+ 支持），它反映的是动态视口真实高度 - 别写
height: 100%—— 它依赖父元素高度，而html和body默认没高度，容易一路失效
justify-content 和 align-items 为啥不生效
这两个属性只在 display: flex 容器里起作用，且都依赖父容器有明确的交叉轴尺寸。主轴默认是水平方向，所以 justify-content: center 管水平，align-items: center 才管垂直居中。
- 漏掉
align-items: center，文字就卡在顶部；只写它不写justify-content，就只垂直居中、水平贴左 - 父容器没设
min-height: 100vh，实际高度为 auto，align-items就失去计算基准 - 子元素是纯文本（没包
<div>），浏览器可能按基线对齐，建议外层加display: block
背景图和内容居中必须分离处理
背景图居中靠 background-position: center center 和 background-size: cover；内容居中靠 Flex 的两个 center。混在一个元素上，内容宽度变化会直接挤压背景图可视区域。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
.hero { background: url(...) center/cover; display: flex; justify-content: center; }→ 文字变宽时，背景只显示中间一截 - 正确结构：外层设
min-height: 100vh+ 背景，内层（或同层子元素）设display: flex+ 两个center - 记得加
background-repeat: no-repeat，否则小图会平铺 - 内容区加
max-width: min(1200px, 90%)防止 flex 行整体撑太宽，右边空一大块
容易被忽略的细节：父容器边距和文档流中断
浏览器默认给 body 加了 8px margin，html 可能有滚动条宽度干扰，导致实际可用高度略小于预期。另外，中间插一层没设 display: flex 的普通 <div>，就会中断 Flex 流，子元素直接失效。
- 必须重置：
html, body { margin: 0; padding: 0; height: 100%; } -
body设height: 100%是为了确保子元素的min-height: 100vh有继承依据 - Flex 容器应套在最外层业务容器上（如
.page-hero），而不是直接动body，避免全局样式冲突 - 子元素设了
position: absolute或flex-grow: 1会退出 Flex 流，justify-content和align-items对它不再生效
