最可靠的绝对定位居中方案是top: 50%; left: 50%; transform: translate(-50%, -50%)，先将元素左上角移至父容器中心，再以其自身宽高为基准反向偏移一半，实现视觉中心对齐；需父容器设position: relative且具备高度，IE8不支持需降级。
用 top: 50% + transform: translateY(-50%) 最可靠
绝对定位本身不提供“居中”语义，top: 50% 只是把元素上边缘移到父容器垂直中线，必须配合偏移才能让元素自身中心对齐。直接写 top: 50% 会发现元素下半部分被截掉——这是最常踩的坑。
正确做法是补一句 transform: translateY(-50%)，让元素向上回退自身高度的一半：
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
-
left: 50%+transform: translateX(-50%)同理处理水平方向，合起来就是完整居中 - 不用管元素宽高是否固定，
transform基于自身尺寸计算，比手动写margin-top: -XXpx安全得多 - 父容器必须有明确高度（比如
height: 400px或min-height: 100vh），否则top: 50%的百分比无参照
父容器没设置 position: relative 就会相对 viewport 定位
如果忘了给父容器加 position: relative（或 absolute/fixed），position: absolute 的元素会一路向上找最近的「已定位祖先」；找不到就相对于视口（viewport）定位，导致位置飘忽不定。
检查方法：打开开发者工具，看该元素的「Offset Parent」是不是你预期的父容器。不是？那就立刻给父容器加：
.parent {
position: relative;
}
- 不需要设宽高，
position: relative本身不改变布局流 - 避免用
position: static（默认值）的父容器做定位上下文 - 如果父容器是
body，要注意body默认没有position: relative，同样要显式声明
IE8 不支持 transform，得用负 margin 回退
老项目要兼容 IE8 时，transform 无效，只能靠预知元素尺寸来写负 margin。比如一个固定高宽的弹窗：
.popup {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 200px;
margin-left: -150px; /* 宽度一半 */
margin-top: -100px; /* 高度一半 */
}
- 必须知道宽高，且不能是
%、em等相对单位（IE8 对负百分比 margin 支持极差） - 响应式场景下基本不可行，所以现在新项目优先用
transform方案 - 如果真要兼容，建议用 CSS 类做降级，比如加个
.ie8class 控制不同规则
用 top: 0 + bottom: 0 + margin: auto 是另一种思路
当元素宽高固定，且父容器有明确高度时，可以不用 transform，改用盒模型自动计算：
.fixed-size {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 200px;
height: 100px;
margin: auto;
}
- 本质是让浏览器在可用空间内自动分配上下左右 margin，从而实现居中
- 必须同时设
top/bottom和left/right为0，缺一不可 - 宽高必须是具体值（
px、em），%或auto会导致margin: auto失效 - 这个方案在 Safari 旧版本里偶有渲染抖动，
transform更稳
真正麻烦的不是写法，而是搞清「谁是定位上下文」「元素尺寸是否可控」「要不要兼容老浏览器」——这三件事没确认清楚，代码写得再标准也容易偏移几像素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
