最稳的全屏居中方案是min-height: 100vh配合flex布局，因height: 100vh受移动端视口变化影响易失真，而min-height兜底且允许延展；背景与内容居中须分离处理，父设背景和min-height，子用flex居中内容。
全屏背景 + 内容居中，最稳的组合是 min-height: 100vh 配合 display: flex + justify-content/align-items，而不是用 height: 100vh 或 height: 100%。
为什么不用 height: 100vh 做全屏容器
滚动条、地址栏缩放、iOS Safari 的视口抖动，都会让 height: 100vh 实际高度忽大忽小，导致内容被截或留白。尤其在移动端，用户下拉刷新时视口高度会临时变大，height: 100vh 容器会撑高并溢出。
-
min-height: 100vh是兜底方案：保证至少占满一屏，内容多时自然延展 -
height: 100%依赖父元素高度，但html和body默认没高度，容易失效 - 如果硬要用
height: 100vh，必须加overflow: hidden防滚动，但牺牲了可滚动性
background 居中和内容居中必须分离处理
背景图居中靠 background-position: center center 和 background-size: cover；内容居中靠 Flex 容器的 justify-content 和 align-items。二者不能混在一个元素上强行兼顾。
- 错误写法：
.hero { width: 100%; background: url(...) center/cover; display: flex; justify-content: center; }—— 如果内容宽度超宽，背景会被“挤窄”，实际只显示中间一截 - 正确结构：外层设
min-height: 100vh+ 背景，内层用max-width+margin: 0 auto或 Flex 居中限定内容区 - 若内容需响应式宽度，用
max-width: min(1200px, 90%)比固定值更安全
Flex 居中时常见的对齐失效原因
写了 display: flex 和 justify-content: center 却不居中？大概率是父容器没真正占满空间。
- 父容器没设
min-height: 100vh，只靠内容撑高，flex 就没“可居中的空间” - 子元素是
block且没设width: 100%或flex: 1，flex 主轴方向无伸缩余地 - 用了
grid-template-columns: 1fr却忘了父容器本身宽度受限（比如被max-width卡住），1fr就很小 - 有 margin/padding 干扰了计算，特别是
box-sizing: border-box没统一时
一个可用的最小闭环示例
直接复制就能跑，不依赖额外类名或重置：
.full-bg {
min-height: 100vh;
background: url("hero.jpg") no-repeat center center/cover;
}
<p>.content-center {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
padding: 2rem;
}</p><p>/<em> 内容区加 max-width 防止小屏过窄 </em>/
.content-center > * {
max-width: 800px;
width: 100%;
text-align: center;
}
</p>
注意：height: 100% 在这里仅用于让 Flex 子项能基于父高计算垂直位置，它生效的前提是父级 .full-bg 已用 min-height: 100vh 立住底线。真正的弹性来自 min-height，不是 height。
最容易被忽略的是：背景和内容的职责必须切开——背景归父容器管尺寸和定位，内容归子容器管宽度和对齐。混在一起调，十次有九次要返工。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
