absolute + top/left + transform 居中是最常用稳妥方案，先用 top: 50%、left: 50% 将元素左上角移至容器中心，再通过 transform: translate(-50%, -50%) 反向偏移自身宽高一半，需父容器设 position: relative，且不触发回流、兼容性好。
absolute + top/left + transform 实现居中
这是最常用也最稳妥的方案，适用于已知或未知宽高的元素。核心思路是先用 top: 50% 和 left: 50% 把元素左上角移到容器中心，再用 transform: translate(-50%, -50%) 向左上反向偏移自身宽高的一半。
- 必须给父容器设置
position: relative（或其他非static值），否则absolute会相对于最近定位祖先或 viewport 定位 -
transform的百分比基于元素自身尺寸，和top/left的基于父容器不同，这点容易混淆 - 不触发回流（
transform属于合成层操作），性能优于修改margin或top/left数值
.container {
position: relative;
width: 300px;
height: 200px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
absolute + margin 负值实现居中（仅限宽高已知）
当元素宽高固定时，可直接用负 margin 拉回一半尺寸。原理简单，但灵活性差，一旦宽高变化就必须同步改 CSS。
- 若元素宽
200px、高100px，则需margin: -50px 0 0 -100px（顺序为top right bottom left） - 必须配合
top: 50%和left: 50%使用，否则负 margin 只是把元素往左上推，不保证居中 - 在响应式场景中极易失效，比如媒体查询里改了宽高却忘了更新 margin
.centered-fixed {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 100px;
margin: -50px 0 0 -100px;
}
absolute + inset 实现居中（现代浏览器专属）
inset 是 top/right/bottom/left 的简写，配合 margin: auto 可让浏览器自动计算偏移量完成居中。它本质上依赖块级元素的自动 margin 行为，所以必须同时设宽高（或至少限制尺寸）。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 需要父容器有明确尺寸（如
width/height或min-height），否则inset: 0会让子元素拉满，margin: auto失效 - 兼容性要求 Chrome 89+、Firefox 66+、Safari 14.1+；IE 完全不支持
- 比
transform方案少一次重绘，但不如后者兼容广泛
.centered-inset {
position: absolute;
inset: 0;
width: 200px;
height: 100px;
margin: auto;
}
为什么不能只靠 top/left 正数偏移居中？
单纯设置 top: 50px; left: 50px 或 top: 50%; left: 50% 只是把元素左上角挪到中心点，不是让元素“整体居中”。除非元素本身宽高为 0，否则视觉上一定偏右下。
立即学习“前端免费学习笔记（深入）”；
-
top: 50%指的是父容器高度的 50%，不是元素自身的 50% —— 这个百分比基准容易误读 - 没有后续补偿（如
transform或负margin），就永远只是“锚点居中”，不是“内容居中” - 如果父容器没设
height，top: 50%可能计算为 0（取决于文档流和格式化上下文）
top/left 看父容器，transform 看自己，margin 看盒模型约束 —— 混用时基准错位，居中就飘了。 
