top: 50vh 单独使用无法真正垂直居中，因它仅将元素上边缘移至视口垂直中心，未抵消自身高度；必须配合 transform: translatey(-50%) 向上偏移自身高度一半才能精准居中。
直接用 top: 50vh 不行，必须配合 transform: translateY(-50%) 才能真正居中 —— 因为 50vh 只是把元素上边缘拉到视口垂直中心，不处理自身高度偏移。
为什么 top: 50vh 单独用会偏下？
视口高度（vh）单位基于整个 viewport，top: 50vh 表示“上边界距离视口顶部 50% 高度”，但元素本身有高度，所以视觉中心会落在视口中心下方。比如一个高 200px 的盒子，在 1000px 高的屏幕上，top: 50vh = 500px，它的中心实际在 600px 处（500 + 100），偏离了 500px 的视口中心。
常见错误现象：top: 50vh 后元素看起来“略偏下”，滚动页面时更明显；尤其当父容器有 padding/margin 或 body 未重置时，偏差被放大。
-
top: 50vh是定位起点，不是对齐逻辑 - 必须用
transform: translateY(-50%)把元素自身向上挪动它高度的一半 - 不能写成
transform: translateY(-50vh)—— 这是错的，-50vh 是固定值，跟元素自身高度无关
position: absolute 元素必须脱离文档流且明确参考上下文
如果没设父容器定位上下文，top: 50vh 仍会生效（因为是相对于 viewport），但一旦页面有滚动、body 被 JS 动态修改高度、或某些 CSS 重置（如 body { margin: 0 } 缺失），行为就不可控。
更稳妥的做法是显式切断依赖：让元素完全脱离任何父容器影响，直接锚定 viewport。
- 给目标元素加
position: absolute，同时确保它没有非 static 的祖先（或干脆不放它进深层嵌套结构） - 显式设置
left: 0和right: 0，避免因父容器宽度变化导致水平偏移 - 若需水平居中，补上
margin: 0 auto（前提是宽高已知）或transform: translateX(-50%)（配合left: 50%）
兼容性与移动端要注意的坑
部分 iOS Safari 版本（尤其是旧版）对 vh 单位支持不稳定：地址栏收起/展开时，100vh 可能变成小于视口真实高度（比如 90vh），导致 50vh 计算失准。
这不是 bug，而是浏览器将地址栏区域也计入 viewport 高度计算所致。
- 临时缓解：用
100dvh替代100vh（Chrome 105+、Safari 16.4+、Firefox 110+ 支持），dvh表示“动态视口高度”，会随地址栏状态自动调整 - 降级方案：JS 动态读取
window.innerHeight并设为 CSS 变量，例如:root { --vh: 100vh; }→ JS 更新为document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`) - 不要用
height: 100vh去“撑开”父容器再居中 —— 绝对定位元素不会撑开包含块，父容器可能高度为 0
真正可靠的视口居中，核心就两点：定位起点用 vh（或 dvh），偏移修正用 transform；其余所有干扰项——父容器定位、body margin、嵌套层级、iOS 地址栏——都得主动隔离或适配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
