父级position设relative、子级设absolute对div translate居中的作用解析

一、这个组合的核心价值 #

• 绑定专属定位上下文：默认情况下，position: absolute的元素会寻找最近的「非static定位的祖先元素」作为定位基准；如果找不到这样的祖先，就直接以页面根元素（html）为基准。给父元素设置position: relative，就是给子元素指定了一个专属的定位容器——子元素的top/right/bottom/left属性都会相对于父元素的边界计算，而非全局页面。
• 父元素保留文档流占位：relative定位的元素不会脱离正常文档流，它的空间会被页面正常保留，不会像absolute元素那样导致后续元素直接补位，不会打乱整体布局结构。
• 实现局部灵活布局：这个组合是做局部悬浮、层叠效果的标配——比如导航栏的下拉菜单、卡片角落的标签、按钮上的小红点徽章，都可以用它实现：子元素能随意定位在父元素的任意位置，父元素自身的布局不受干扰。

二、translate(-50%, -50%) 居中的原理 #

这个居中逻辑可以拆成两步理解：

1. absolute定位先将元素左上角移至父元素中心：当子元素设为position: absolute且父元素为relative时，给子元素添加left: 50%和top: 50%，会把子元素的左上角精准定位到父元素的中心位置（此时定位基准是父元素）。但此时子元素的中心还未与父元素中心重合，只是左上角处于中心位置。
2. translate补正实现真正居中：transform: translate(-50%, -50%)是相对于元素自身的宽高进行位移的——X轴向左移动自身宽度的50%，Y轴向上移动自身高度的50%。这样一来，子元素的中心就刚好与父元素的中心对齐，实现完美居中。

如果不满足父relative+子absolute的条件：

• 若父元素未设置relative，子元素的absolute会以页面根元素为基准，left:50%和top:50%会把元素左上角移到页面视口中心，而非目标父元素的中心，无法实现相对于父元素的居中。
• 若子元素未设置absolute，left:50%和top:50%对其完全无效（static定位的元素不支持这些定位属性），translate的位移也只是相对于它在文档流中的原始位置，同样无法达到居中效果。

直观示例代码 #

.parent-box {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: #f0f0f0;
}

.child-box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  background-color: #2ecc71;
}

内容的提问来源于stack exchange，提问作者TopTierCoder