子div负左外边距导致父div无法居中的解决方法

问题根源 #

绝对定位的图标用left: -90px脱离文档流后，父容器.icon-box的居中仅基于自身宽度计算，导致图标超出父容器左侧，视觉上整体块不居中；移动端视口较窄时，超出的图标会被页面边缘截断。

修复方案 #

通过父容器补位+负边距抵消的方式，让图标和内容块整体保持居中，同时避免移动端截断：

修改后的完整代码

.icon-text-box {
  border: 1px solid red;
  padding-left: 90px; /* 预留图标偏移宽度，防止移动端截断 */
  padding-right: 15px; /* 移动端右侧留白 */
}

.icon-box {
  background: #fff;
  border-radius: 33px;
  margin: 6rem auto;
  padding: 4rem 4rem 4rem 7rem;
  box-shadow: 0 3px 6px -2px rgb(0 0 0 / 20%), 0 6px 12px rgb(0 0 0 / 10%);
  position: relative;
  display: flex;
  align-self: center;
  max-width: 900px;
  margin-left: -90px; /* 负边距抵消父容器左内边距，让内容块回归居中 */
}

.icon-box p {
  font-size: 22px;
  margin-bottom: 0;
}

.icon-box-icon {
  position: absolute;
  left: 0;
  transform: translateX(-100%); /* 向左偏移自身宽度，替代原硬编码负left值 */
  overflow: hidden;
  display: flex;
  align-self: center;
  height: 177px;
}

.icon-box-icon img {
  border-radius: 40px;
}

/* 移动端适配优化 */
@media (max-width: 768px) {
  .icon-box-icon {
    height: 120px; /* 缩小图标尺寸适配移动端 */
  }
  .icon-text-box {
    padding-left: 60px; /* 对应缩小后的图标偏移宽度 */
  }
  .icon-box {
    margin-left: -60px;
    padding: 2rem 2rem 2rem 4rem; /* 缩小内边距节省空间 */
  }
  .icon-box p {
    font-size: 18px; /* 缩小字体提升可读性 */
  }
}

<div class="container-fluid mw-972 icon-text-box">
  <div class="icon-box">
    <div class="icon-box-icon">
      <img src="https://www.freepnglogos.com/uploads/spotify-logo-png/spotify-simple-green-logo-icon-24.png" />
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
</div>

核心改动说明

1. 父容器.icon-text-box添加左内边距，为偏移的图标预留显示空间，解决移动端截断问题；
2. 内容块.icon-box添加负左外边距，抵消父容器的内边距，确保内容块在页面中保持居中；
3. 图标容器改用transform: translateX(-100%)实现偏移，替代硬编码的负left值，适配性更稳定。

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