不推荐用absolute+负margin实现全屏背景图垂直居中，因其定位的是元素而非background-image，需额外DOM、维护成本高且不响应；应直接用background-position:50% 50%/cover/no-repeat配合min-height:100vh。
直接用 absolute 配合负边距实现全屏背景图垂直居中，是过时且高风险的做法，不推荐在现代项目中使用。
为什么不用 absolute + 负 margin 做全屏背景图
这种方案本质是把一张 <img> 标签绝对定位到视口中心，再用 margin: -height/2 -width/2 反向偏移——但它完全不适用于「背景图」场景：
- 你不是在居中一个 DOM 元素，而是在控制
background-image的渲染位置 -
absolute定位的是元素盒模型，对 CSS 背景图的background-position没有任何影响 - 若强行套用，需额外包裹一层
<img>，带来不必要的 DOM 节点、重排开销和响应式维护成本
absolute + 负 margin 真正适用的场景
它只在以下明确条件下有效：
- 目标是一个**有固定宽高的块级元素**（比如弹窗、提示框、logo 容器）
- 父容器已设
position: relative或position: absolute - 你愿意硬编码子元素尺寸，并接受它在缩放或字体变化时偏移失准
典型写法：
.parent { position: relative; height: 100vh; }
.child { position: absolute; top: 50%; left: 50%; width: 300px; height: 200px; margin: -100px 0 0 -150px; }
注意：margin 值必须是宽高的一半，且单位不能错——-100px 不是 -100%，否则会失效。
全屏背景图该用什么定位逻辑
背景图的“定位”由 background-position 控制，和元素定位（position）无关。关键参数只有三个：
-
background-position: 50% 50%—— 让图片中心对齐容器中心（最稳，兼容所有浏览器） -
background-size: cover—— 确保填满，避免留白或拉伸 -
background-repeat: no-repeat—— 必须关闭平铺，否则50% 50%无效
完整示例：
body { background: url(bg.jpg) 50% 50% / cover no-repeat; min-height: 100vh; }
别碰 background-attachment: fixed：iOS Safari 和部分 Android WebView 中滚动卡顿严重，且焦点易随地址栏显示/隐藏跳变。
真正容易被忽略的点是：全屏背景图的“容器高度”必须明确。用 min-height: 100vh，而不是 height: 100% 或 height: 100vh —— 后者在内容超长时会截断，前者允许自然滚动且兼容性更稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
