如何仅修改父元素属性，使其吸收子元素外边距并保持自身居中？

我有一个父div，内部包含一个margin-left为710px的子div。我希望父div能够“吸收”这额外的710px外边距（即父元素背景覆盖该区域），同时保持在页面居中，但不能修改或添加子元素的任何属性（子元素是动态生成的）。

当前代码如下：

.child {
  background-color: #d3d3d3;
  width: 60px;
  height: 100px;
  margin: 80px 0 0 710px;
}

.parent {
  background-color: #f1f2f3;
  margin: 0 auto;
  width: max-content;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

<div class="parent">
  <div class="child"></div>
</div>

只需修改父元素的CSS样式即可实现需求：

.parent {
  background-color: #f1f2f3;
  margin: 0 auto;
  width: fit-content;
  padding-left: 710px; /* 覆盖子元素margin-left的区域 */
  position: relative;
  left: -710px; /* 抵消padding导致的位移，保持父元素居中 */
}

实现逻辑 #

• padding-left: 710px：给父元素左侧添加与子元素margin-left等值的内边距，让父元素的背景延伸到子元素左边的外边距区域，达到“吸收”效果。
• position: relative; left: -710px：将父元素向左偏移710px，抵消padding-left带来的整体右移，确保父元素在页面中保持居中状态。
• width: fit-content：让父元素宽度自适应子元素宽度与padding-left的总和，避免出现多余空白或溢出。

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