绝对定位+负margin需父容器position:relative、子元素明确宽高并用top/left:50%加负margin回拉；绝对定位+margin:auto需四边为0且子元素有固定宽高；flex需父容器有高度；grid需现代浏览器支持。
绝对定位 + 负 margin：最直白但易错
父容器设 position: relative，子元素设 position: absolute，再用 top: 50%、left: 50% 把左上角拉到中心，最后靠 margin-top 和 margin-left 往回拉一半尺寸。
常见错误现象：margin-top: -100px 写成 -50px，或忘了写 position: relative 导致子元素相对于 viewport 定位，整个偏出视口。
- 必须知道子元素确切宽高（比如
width: 200px; height: 100px），才能算出margin-left: -100px、margin-top: -50px - 父容器不能是
display: inline或未设置尺寸的浮动元素，否则top/left: 50%的参考系会错乱 - 不推荐用于响应式场景——宽高一变，margin 就得重算
绝对定位 + margin: auto：不依赖 transform，但限制多
写法固定：position: absolute + top: 0、right: 0、bottom: 0、left: 0 + margin: auto。浏览器会自动把外边距均分，实现居中。
容易踩的坑：Safari 15.4 之前版本对这个组合的支持有偏差，可能偏移 1–2px；Chrome 和 Firefox 行为一致，但前提是子元素必须有明确的 width 和 height 值。
-
max-width或fit-content不行，哪怕内容就一张图也不行 - 如果子元素用了
transform: scale(1.5)，margin: auto仍按原始尺寸计算，不会自动适配缩放后大小 - 适合弹窗、loading spinner 这类尺寸稳定、需兼容老 iOS WebView 的场景
Flex + justify-content/align-items：现代首选，但高度不能塌
display: flex 配合 justify-content: center 和 align-items: center 是最简写法，但父容器必须有明确高度，否则子元素“看起来没居中”——其实是父容器高度塌陷成了内容高度。
常见错误现象：写了两行 CSS 却没效果，八成是父容器没设 height 或 min-height，或者被 float、position: absolute 挤出了文档流。
- 推荐用
height: 100vh或min-height: 300px显式声明高度 - 子元素无需固定宽高，支持文字、图片、卡片等动态内容
- IE10 及以下不支持，若项目需兼容旧系统，得 fallback 到其他方案
Grid + place-items: center：语义最强，但别为简单场景滥用
display: grid + place-items: center 是目前语义最清晰的写法，本质等价于 justify-items: center + align-items: center，专为单个子元素居中设计。
性能和兼容性影响：在 Safari 15.6+、Chrome 87+、Firefox 70+ 中表现稳定；但 IE 完全不支持，Edge 16–18 仅部分支持，且 Grid 在复杂嵌套布局中可能触发意外重排。
- 不要把它用在多列多行的 Grid 容器里再强行居中一个子项——语义错位，维护成本高
- 如果父容器已有
grid-template-columns或grid-template-rows，place-items仍生效，但优先级低于显式轨道定义 - 真正适合它的场景是模态框、空状态提示、图标按钮这类“单焦点”UI 元素
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
