使用 absolute 定位结合 transform 可实现未知宽高元素的水平垂直居中：先设置 position: absolute、top: 50%、left: 50%，再通过 transform: translate(-50%, -50%) 将元素中心对齐父容器中心，无需知晓尺寸，适用于弹窗、图片等场景，灵活且兼容性好。
在网页布局中，让元素居中是一个常见需求。使用 absolute 定位 结合 transform 是一种高效且兼容性良好的居中方法，尤其适用于未知宽高的元素。
absolute 定位实现脱离文档流
通过设置 position: absolute，元素会脱离正常文档流，相对于最近的已定位祖先元素进行定位。若父容器设置了 position: relative，子元素就能以它为参考点进行精确定位。
- 给需要居中的元素设置 position: absolute
- 使用 top: 50% 和 left: 50% 将元素的左上角移至父容器中心
- 此时元素并未真正居中，因为它的起点仍是左上角
transform 调整元素自身偏移
仅靠百分比定位无法实现真正的居中，因为它是基于元素左上角的。这时需要 transform 来反向移动元素自身尺寸的一半。
- 添加 transform: translate(-50%, -50%)
- translateX(-50%) 向左移动自身宽度的 50%
- translateY(-50%) 向上移动自身高度的 50%
- 这样元素的中心就与父容器中心对齐了
完整居中代码示例
以下是一个通用的水平垂直居中写法：
立即学习“前端免费学习笔记（深入）”；
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
这种方法不需要知道元素的具体尺寸，适合图片、弹窗、提示框等场景。
基本上就这些，掌握这个技巧后，居中不再依赖固定宽高或额外的 margin 计算，灵活又简洁。
