如何让非嵌套的absolute定位div元素相互居中？

当然可以搞定！你现在的问题是没摸透绝对定位元素的居中逻辑，不用嵌套也能轻松让这些大小递减的div同心对齐，给你两个实用方案：

方法一：transform: translate(-50%, -50%)（最通用） #

这是绝对定位元素居中的「万能解法」，不管元素有没有固定宽高都能用，特别适合你这种尺寸依次变化的场景：

1. 用 left: 50%; top: 50%; 把元素的左上角定位到父容器（默认是body）的中心
2. 再用 transform: translate(-50%, -50%) 把元素自身向左、向上偏移一半宽高，这样元素的中心就和父容器中心完全重合了

修改后的CSS代码示例：

body { 
  font-family: Helvetica, sans-serif; 
  /* 可选：给body加最小高度，确保页面高度足够 */
  min-height: 100vh;
} 
div { 
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 5px; 
  padding: 3px; 
  margin: 3px; 
} 
#outer { 
  background-color: thistle; 
  height: 200px; 
  width: 200px;
}
/* 其他尺寸递减的div同理设置宽高即可 */

方法二：margin: auto + 四边定位 #

如果你的所有div都有明确的固定宽高（从你给的代码看#outer是有的），可以用这个方法：
给每个绝对定位的div设置四边为0，再通过margin: auto让元素自动在父容器中居中——原理是绝对定位元素在四边都被限制时，margin:auto会自动分配剩余空间。

CSS代码示例：

div { 
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border-radius: 5px; 
  padding: 3px; 
  margin: 3px; 
} 
#outer { 
  background-color: thistle; 
  height: 200px; 
  width: 200px;
}

为什么你之前用position: relative没用？ #

position: relative是让元素相对于自身原位置偏移，它不会改变绝对定位元素的参照系——绝对定位元素的参照系是最近的设置了非static定位的父元素。你单独给div加relative没用，要是想改变参照系，得给它们的共同父容器（比如body）加position: relative，但其实上面的两个方案都不需要额外设置父容器的定位，直接用默认的body作为参照就行。

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