child div 在 parent div 上对齐中心是否溢出？

Question

你好 Whosebug 团队，

溢出的parentdiv里面的childdiv怎么会有左右边距呢？我正在尝试解决这个问题，但它没有给出一个干净的解决方案。

尝试：

margin-right 行不通

div {
  border: 1px solid black;
}

.parent {
  width: 300px;
  height: 300px;
  margin: auto;
  position: relative;
  overflow: auto;
}

.child {
  width: 350px;
  height: 150px;
  top: 50px;
  margin-left: 20px;
  margin-right: 20px;
  position: absolute;
  display: inline-block;
}

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

我不干净的解决方案：

div {
  border: 1px solid black;
}

.parent {
  width: 300px;
  height: 300px;
  margin: auto;
  position: relative;
  overflow: auto;
}

.child {
  width: 350px;
  height: 150px;
  top: 50px;
  margin-left: 20px;
  border-right: 20px solid red;
  position: absolute;
  display: inline-block;
}

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

有更好的方法来解决这个问题吗？

Answer 1

由于您使用 position: absolute 作为 child，实现您想要的效果的最佳方法是删除 position: absolute，然后添加您需要的边距。

div{
  border: 1px solid black;
}
.parent {
    width:300px;
    height:300px;
    margin:auto;
    position: relative;
    overflow: auto;
}

.child {
    width:350px;
    height:150px;
    top: 50px;
    margin: 50px 20px 0;
    display: inline-block;
}

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

更新

如果您需要 child div 成为 position: absolute，您必须将其包装在另一个 div 中，如下所示：

div{
  border: 1px solid black;
}
.parent {
  width:300px;
  height:300px;
  margin:auto;
  position: relative;
  overflow: auto;
}
.child {
  border-color: red;
  position: absolute;
  top: 20px;
  height: 150px;
}
.sub-child {
  width:350px;
  height:150px;
  margin: 0 20px;
  display: inline-block;
}

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

child div 在 parent div 上对齐中心是否溢出？

child div align center on parent div with overflow?

html

javascript

css

overflow

centering