该方案能直接居中任意宽高子元素：父容器须设position: relative提供定位上下文，子元素用top: 50%; left: 50%; transform: translate(-50%, -50%)，其中transform基于自身尺寸反向偏移，实现几何中心对齐，不触发重排。
这个方案能直接居中任意宽高的子元素，不需要提前知道尺寸，也不触发重排，但必须确保父容器有定位上下文。
父容器为什么必须设 position: relative
因为 top: 50% 和 left: 50% 的百分比是相对于「最近的已定位祖先元素」计算的。如果父元素是默认的 position: static，浏览器会一路往上找，最终可能相对于 body 或视口定位——子元素就飞出去了。
- 加了
position: relative→ 定位锚点锁定在父盒内部，安全 - 用
position: absolute或position: fixed也行，但语义上不自然，容易干扰布局逻辑 - 父容器高度为 0（比如只含浮动子元素且未清除）→ 视觉上“没地方可居中”，得补
height、min-height或触发 BFC
transform: translate(-50%, -50%) 是怎么起作用的
它不是把元素往左上挪父容器的一半，而是挪「自身宽高的一半」。这正是它能适配动态内容（如文字流、图片、max-content 宽度）的关键。
-
top: 50%把元素**左上角**移到父容器垂直中点 -
left: 50%把元素**左上角**移到父容器水平中点 -
transform: translate(-50%, -50%)再把元素自身向左、向上各挪自己宽高的一半，于是**中心点**对齐父容器中心 - 别写成
transform: translateX(-50%) translateY(-50%)—— 功能等效但冗余，还可能因顺序问题被覆盖
常见错误现象与修复
看到元素没居中？大概率掉进下面某个坑里：
立即学习“前端免费学习笔记（深入）”；
- 父元素漏了
position: relative→ 补上 - 子元素没声明
position: absolute→ 不加这句，top/left完全无效 - 写了
left: -50%（误以为是自身尺寸）→ 实际是父容器宽度的 -50%，直接偏出屏幕 - 子元素同时用了
transform: scale(1.2)等其他变形 → 多个transform值会被合并，注意书写顺序：transform: scale(1.2) translate(-50%, -50%)和transform: translate(-50%, -50%) scale(1.2)效果不同 - 后续兄弟元素需要紧贴该居中元素下方 → 这个方案会让子元素脱离文档流，此时该换
display: flex或display: grid
真正容易被忽略的是：它不参与文档流。如果你在居中元素下面还放了其他块级内容，那些内容会从父容器顶部开始排布，而不是从居中元素底部接着往下——这不是 bug，是绝对定位的天然行为。
