首屏主视觉必须用 height: 100vh 实现视口内居中，配合 display: grid + place-items: center；html/body 需重置 margin 并设 height: 100%；避免 text-align、margin: auto 等无效方案，警惕 flex 混用与定位上下文缺失。
首屏主视觉必须用 height: 100vh 做高度基准
首屏（viewport）居中不是“让元素在页面里居中”，而是“让它在当前可见视口里居中”。如果父容器没设高度，justify-content: center 或 place-items: center 会失效——子元素会塌缩到顶部，因为父容器高度为 0 或仅由内容撑开。
-
html和body必须清除默认margin：html, body { margin: 0; height: 100%; } - 主视觉容器要显式设
height: 100vh（不是100%），否则滚动时无法保证“首屏”语义 - 若页面有固定 header，可用
calc(100vh - 60px)替代，但需确保 header 高度稳定（避免 JS 动态改高） - 不要依赖
min-height: 100vh——它只保底，不强制占满，小屏下可能仍偏上
display: grid + place-items: center 是最简可靠的组合
比起 flex，grid 在单子元素居中场景下更干净：不用考虑 flex-wrap、align-content 等冗余属性，且对子元素类型零要求（div、img、svg、甚至空 span 都能直接居中）。
- 写法极简：
display: grid; place-items: center; height: 100vh; - 兼容性已无硬伤：Chrome/Firefox/Safari/Edge ≥ 2022 全支持，IE 不在考虑范围（除非明确要求）
- 副作用少：不干扰子元素的
float、vertical-align，也不改变其display类型 - 注意：
place-items作用于容器，不是子元素；子元素无需额外样式
绝对定位方案只在需要脱离文档流时才用
比如主视觉含半透明遮罩层、浮动按钮、或需 z-index 层级控制时，position: absolute 才有意义。纯居中目的下，它比 grid 多三步操作、多一个定位上下文依赖，且易出错。
- 必须给父容器（通常是
body或直接包裹层）加position: relative，否则top: 50%会相对于视口而非预期容器 -
transform: translate(-50%, -50%)的百分比不能写成像素值（如-100px），否则响应式下失效 - 若同时用
scale()或rotate()，必须合并进同一行transform声明，否则后写的会覆盖前写的 - 滚动时若父容器非
body，且自身可滚动，position: absolute元素会随父容器滚动——这不是“首屏居中”的本意
别踩这些坑：text-align、margin: auto、flex 混用失效点
很多开发者试过 text-align: center 或 margin: 0 auto，结果文字卡顶、盒子不动——根本原因是它们只管水平方向，且严重依赖上下文。
-
text-align: center只对行内内容有效，写在body上对div无效；且完全不处理垂直方向 -
margin: 0 auto要求子元素是块级、有明确width、且父容器不能是flex或grid——而首屏容器恰恰常设为display: flex，此时该声明被忽略 - 如果父容器用了
display: flex，再给子元素设margin: auto，它只在 flex 主轴方向起作用（比如flex-direction: row时水平居中，但垂直方向无效） - 真正容易被忽略的是：居中行为由父容器的布局模式决定，不是子元素自己能“决定”怎么居中的
首屏居中真正的复杂点不在写法本身，而在于你是否意识到——它本质是“视口约束下的定位问题”，不是“页面流内的排版问题”。100vh、定位上下文、布局模式接管权，这三个点漏掉任何一个，都会导致居中在不同设备或滚动状态下偏移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
