无法将position:absolute元素居中于position:relative元素内的问题求助

嘿，我来帮你看看这个问题！你用的top:0; bottom:0; left:0; right:0; margin:auto;这个方法其实是对的，但可能你对“居中”的视觉预期和实际效果有偏差，或者没注意到子元素尺寸的问题~

先拆解一下你的代码逻辑：

• 父元素.one设置了position: relative，这就给绝对定位的子元素.two提供了定位参考容器。
• 子元素.two用了top/bottom/left/right: 0，相当于让它的四个边都紧贴父元素的四个边，再加上margin: auto，浏览器就会自动分配margin值，让子元素在父元素的定位范围内居中。

那为什么你觉得没居中呢？看你的代码，.two的宽（400px）和高（160px）都远大于父元素.one的宽（200px）和高（100px），所以子元素会向四周溢出父元素，但它的中心点其实和父元素的中心点是完全重合的！不信你可以计算一下：
父元素中心坐标是(100px, 50px)（相对于自身左上角），子元素的中心坐标是(200px, 80px)（相对于自身左上角），那么子元素左上角的定位应该是(100-200, 50-80) = (-100px, -30px)，你打开开发者工具查看.two的位置就能验证这一点。

如果你的需求是让子元素在父元素内部显示且居中（不溢出），那你需要确保子元素的宽高小于等于父元素的宽高，比如把.two的宽改成150px，高改成80px，就能看到它在红色父元素里完美居中了。

另外，还有两种常用的绝对定位居中方法，也可以给你参考：

• 方法一：利用transform: translate()，不需要知道子元素的宽高：

.two {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #0f0;
  opacity: 0.3;
  height: 160px;
  width: 400px;
}

这个方法是先让子元素的左上角对齐父元素的中心，再通过translate把自身向左向上移动一半的宽高，从而实现居中——不管子元素尺寸多大，中心点都会和父元素重合。

• 方法二：如果知道子元素的宽高，也可以直接计算margin值：

.two {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -200px; /* 宽度的一半 */
  margin-top: -80px; /* 高度的一半 */
  background: #0f0;
  opacity: 0.3;
  height: 160px;
  width: 400px;
}

总结一下，你原来的方法本身是有效的，只是因为子元素尺寸超过父元素，导致视觉上看起来“没居中”，但实际上中心点是对齐的~ 可以根据你的实际需求选择合适的居中方式哦！

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