卡片滚动偏移是因定位上下文丢失：父容器未设position: relative导致absolute定位相对于视口；应为直接父容器设relative/fixed/absolute，并用top:50%;left:50%;transform:translate(-50%,-50%)居中。
卡片用 absolute + transform 居中时，滚动后偏移
这是典型定位上下文丢失问题：如果父容器没设 position: relative，position: absolute 的卡片会相对于视口（viewport）定位，一滚动就“粘”在屏幕固定位置，而不是随页面内容居中。
- 必须给卡片的**直接父容器**加
position: relative（或absolute/fixed），提供定位上下文 - 卡片自身写
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) - 避免把卡片直接挂在
body下——body默认是static，不构成定位上下文 - 如果父容器高度动态变化（比如内容加载后撑高），要确保它始终能包裹卡片，否则
top: 50%会算错基准
Flex 布局居中卡片却随滚动“上浮”
常见于父容器用了 display: flex 但没控制高度，导致卡片在“视觉上居中”，实际是靠 align-items: center 把它挤到可视区域中央——一旦页面变长、出现滚动条，卡片就卡在首屏中间，不再随内容流走。
- 若目标是“卡片始终在当前视口正中”，用
position: fixed更合适，配合同样的transform: translate(-50%, -50%) - 若目标是“卡片在文档流里居中，且不因滚动偏移”，那就别用 Flex 做全页居中；改用块级居中（
margin: 0 auto）+ 父容器宽度控制 -
align-items: center依赖父容器有明确高度（如height: 100vh），否则行为不可控
Grid 的 place-items: center 在滚动时失效
Grid 居中本身不会因滚动偏移，但容易踩坑的是：父容器设了 place-items: center，却忘了限制其尺寸范围。结果 Grid 容器高度无限延伸，center 只作用于“当前渲染区块”，不是整个文档。
- 给 Grid 父容器加
height: 100vh或min-height: 100vh，确保它至少占满一屏 - 如果卡片要随内容滚动、只在某个区域居中，就别用 Grid 全局居中，改用局部容器 +
margin: 0 auto -
place-items: center是 shorthand，等价于justify-items: center; align-items: center，只影响 Grid 子项，不影响后代元素
响应式下卡片居中突然错位
根本原因往往是宽度计算逻辑冲突：比如卡片设了 width: 80%，又套了 transform: translate(-50%, -50%)，缩放或窗口 resize 后，50% 基准变了，但浏览器没重触发 layout。
- 优先用 Flex 或 Grid，它们天然响应式，不需要手动算百分比偏移
- 如果必须用
transform，确保卡片宽高是固定值（如width: 400px）或使用fit-content，避免依赖父容器动态宽度 - 移动端 Safari 对
transform+ 百分比 width 组合有渲染延迟，可加will-change: transform强制触发
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
