justify-content: center 仅控制主轴（默认水平）居中，垂直居中需配合 align-items: center，且父容器须有明确高度（如 min-height: 100vh），否则无效。
为什么只写 justify-content: center 文字不垂直居中
因为 justify-content 只管主轴（默认是水平方向），垂直方向属于交叉轴，得靠 align-items。漏掉它，文字就卡在顶部或按默认 stretch 拉高——尤其当容器没设高度时，align-items: center 根本没参考基准。
- 常见错误现象：
.hero { display: flex; justify-content: center; }→ 文字水平居中但紧贴容器上沿 - 必须同时加
align-items: center，且父容器要有明确高度或最小高度 - 如果子元素是纯文本（无块级包裹），浏览器会按基线对齐，建议外层加
display: block或用span包一层再设align-self: center
min-height: 100vh 比 height: 100vh 更稳
iOS Safari 和部分安卓浏览器在地址栏收起/弹出、下拉刷新时会临时改变视口高度，height: 100vh 会跟着抖动，导致内容被截或留白；min-height: 100vh 则兜底保证至少一屏，内容多时还能自然延展。
- 别写
height: 100%—— 它依赖父级高度，而html和body默认没高度，容易失效 - 兼容旧版 Safari 可加
min-height: -webkit-fill-available作后备 - 背景图和内容居中要分离：背景设在外层容器，
flex居中逻辑用内层或同一层但确保不干扰background-size: cover
背景图居中和文字居中不能混在一个声明里
background-position: center 控制的是图片本身在容器中的定位，justify-content/align-items 控制的是子元素（比如文字）的位置——二者作用对象不同，强行塞进一个元素容易出问题。
- 错误写法：
.hero { background: url(...) center/cover; display: flex; justify-content: center; }→ 如果文字内容宽度过大，会挤压背景图显示区域 - 正确结构：外层设
min-height: 100vh+ 背景，内层（或同层子元素）用display: flex+ 两个center - 记得加
background-repeat: no-repeat和background-size: cover，否则小图会平铺或拉伸变形
文字居中后右侧留白异常？检查容器宽度和 justify-content 作用范围
justify-content: center 居中的是整个 flex 行（flex line），不是每个子项单独居中。如果容器太宽、里面只有文字和一张图，它们作为一个整体被居中，右边就容易空一大块。
立即学习“前端免费学习笔记（深入）”；
- 解决方法一：给文字容器加
max-width: min(1200px, 90%)，避免撑满全宽 - 解决方法二：图文用
flex-wrap: wrap并配合text-align: center，让换行文字也视觉对齐 - 移动端特别注意：不要依赖固定像素值，优先用相对单位或
fit-content（Safari 需加-webkit-fit-content）
min-height: 100vh，如果被 overflow: hidden 或 position: absolute 意外截断，或者字体加载延迟导致重排，align-items: center 就会静默失效。调试时直接看开发者工具里父容器的 “Computed” 面板里的 height 值，比猜更准。 
