全屏居中需同时控制水平和垂直方向，现代项目首选display: grid + place-items: center，老项目或兼容IE时用position: absolute + transform；margin: 0 auto和text-align: center仅支持水平居中，无法实现垂直居中。
全屏居中不是加个 text-align: center 就完事的——它必须同时控制水平和垂直两个方向，且依赖父容器高度是否有效。现代项目首选 display: grid + place-items: center，老项目或需兼容 IE 的场景才考虑 position: absolute + transform。
为什么 margin: 0 auto 和 text-align: center 不能全屏居中
这两个方法只管水平方向：margin: 0 auto 要求元素是块级、有明确宽度、父容器不能是 flex 或 grid；text-align: center 只影响行内内容的水平对齐，对垂直方向完全无效。把它们用在 body 或全屏容器上，结果通常是“顶部中间”，而不是真正的屏幕正中央。
- 错误现象：
<div style="text-align: center;"><img src="x.png"></div>→ 图片卡在顶部居中，没垂直偏移 - 使用场景：仅适用于纯水平居中，比如导航栏按钮、卡片列表
- 性能影响：无额外开销，但逻辑错位会导致后续调试成本上升
display: grid + place-items: center 是最简方案
这是目前语义最清晰、代码最少的全屏居中方式，本质是把父容器当作单格网格，让子元素自动在该格内居中。它不依赖子元素尺寸，也不需要写 transform 或计算偏移量。
- 必须作用在父容器上，不是目标元素自身
- 父容器需设
height: 100vh（或明确高度），否则垂直方向无参照，子元素会塌缩到顶部 - 要确保
html和body没默认 margin：html, body { height: 100%; margin: 0; } - 兼容性：Chrome/Firefox/Safari/Edge ≥ 2022 支持良好，不支持 IE
<div style="display: grid; place-items: center; height: 100vh;"> <p>我要居中</p> </div>
position: absolute + transform: translate(-50%, -50%) 兼容性更广
这个组合适合需要支持 IE10+ 或老版 Android WebView 的项目。原理是先用 top: 50% 和 left: 50% 把元素左上角移到视口中心，再用 transform 反向平移自身宽高的一半。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 父容器（通常是
body）必须是定位上下文，即不能是static——通常加position: relative或直接用视口作为参考 - 目标元素必须脱离文档流，所以
position: absolute不可省略 - 容易踩的坑：
transform值写成translate(-50px, -50px)（错！必须是百分比）；或忘了清除body默认 margin 导致偏移不准 - 性能影响：
transform触发合成层，渲染效率比grid略低，但日常使用无感
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); "> <p>我要居中</p> </div>
别把 display: flex 直接加在 body 上
虽然 flex 也能实现全屏居中，但直接设在 body 上风险很高：它会让所有 body 的直系子元素（比如多个 <p>、<header>、<footer>）都变成 flex item，布局极易失控。
- 正确做法：包一层容器，比如
<main class="full-center">，只对它应用display: flex - 必须配
min-height: 100vh（不是height），防止内容少时容器塌缩 - 若父容器已有
flex-direction: column等样式，justify-content和align-items的行为会变化，需重新确认对齐轴
真正麻烦的不是选哪种方案，而是忘记检查父容器的高度来源——100vh 在 iOS Safari 中可能因地址栏收放而跳变，height: 100% 又依赖所有祖先元素都设了高度。这些细节不验证，再漂亮的居中代码上线后也会偏一像素。
