全屏背景上元素居中需确保父容器有明确高度，推荐用min-height: 100vh + display: grid + place-items: center；若兼容旧浏览器，则用position: relative/absolute + transform(-50%,-50%)。
全屏背景上元素居中，必须先搞定父容器高度
全屏背景（比如 background-image 设在 body 或全宽 div 上）本身不提供布局约束——它只是“画”在背后。元素能否真正居中，取决于它的**父容器是否具备明确的垂直参考高度**。很多人写完 background: url(...) 就直接给子元素加 text-align: center 或 margin: 0 auto，结果只水平居中、垂直卡顶，就是因为父容器没设高。
- 最常用且可靠的方案是给父容器设
height: 100vh（不是100%），确保它撑满整个视口高度 - 如果父容器是
body，务必重置默认边距：html, body { margin: 0; height: 100%; }，否则100vh会被body默认 margin 推偏 - 若背景图用在某个
div上，该div必须显式设height: 100vh，不能靠内容撑开——背景图再大，空div高度仍是 0
视口单位（vh/vw）别乱套在元素自身尺寸上
vh 和 vw 是好东西，但常被误用：有人给居中元素自己设 width: 80vw; height: 60vh，再配 margin: 0 auto，以为能“自适应居中”。问题在于：margin: 0 auto 只管水平，且要求块级+有宽；vh 值虽响应式，但垂直方向仍无居中逻辑，元素还是贴顶。
- 视口单位更适合用在**父容器高度定义**（如
min-height: 100vh）或**背景图容器尺寸控制**（如全屏轮播图 wrapper） - 想靠
vw控制文字大小或图标宽度？可以，但和居中无关——居中行为由布局方式（grid/flex/absolute）决定，不是尺寸单位决定的 - 慎用
vh做子元素高度：iOS Safari 在地址栏收放时会触发vh重算，导致元素跳动；更稳的做法是用min-height: 100vh+ flex/grid 居中
推荐组合：grid + 100vh，一行代码解决
现代项目里，display: grid 配 place-items: center 是全屏背景上居中元素的最优解——它不依赖子元素尺寸、不触发重排、语义清晰。但必须写对位置：样式加在**承载背景图的父容器上**，不是加在要居中的那个按钮或标题上。
<div style="background: url(bg.jpg) no-repeat center/cover; display: grid; place-items: center; min-height: 100vh;"> <h1>欢迎光临</h1> </div>
-
min-height: 100vh比height: 100vh更安全：内容超出时不会遮挡，也不会因滚动条宽度变化导致水平抖动 - 如果父容器已有其他 grid 轨道（比如
grid-template-columns），place-items可能覆盖原有对齐，此时改用justify-content: center; align-items: center更可控 - IE11 不支持
place-items，需降级为justify-items: center; align-items: center，并确认父容器是display: grid
兼容老浏览器？absolute + transform 还得加定位上下文
需要支持 Android 4.4 WebView 或 IE10+ 时，position: absolute 组合仍是首选，但漏掉一个细节就失效：父容器没设 position: relative，top: 50% 就会相对于整个视口定位，一滚动元素就飘走。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
position: relative（哪怕它只是个空div），才能成为子元素的定位上下文 - 子元素写
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)，注意transform的百分比是按自身宽高算的，不是父容器 - 别写成
transform: translate(-50px, -50px)——图片或文字尺寸未知时，固定像素必然偏移 - 如果背景图设在
body上，直接在body加position: relative即可，但要注意它可能影响其他绝对定位元素
place-items: center，只要父容器高度塌陷或被 margin 干扰，效果就立刻消失。 
