为什么我的元素与它的兄弟元素对齐？又名溢出：隐藏在 Parent 左侧中断：Children 50%

Question

下面是我的图表的简要说明（如下所示）：
黄色方框是parent.
黑色和青色框是黄色框的children。
多余的青色框被 parent 通过 overflow: hidden

隐藏了

自从 overflow: hidden 打破 margin: auto，我试图通过使用 left: 50% 将黑框居中到它的 parent（即黄色框）。但是，黑色框与青色框的整个宽度对齐。

有人可以解释另一种方法，我可以将黑框与其 parent 的宽度对齐吗？我也会接受修复 margin: auto 的答案。

这是我的代码：

.yellow-box {
    display:table-cell;
    height:498px;
    width:33.33333333%;
    overflow:hidden;
    position:relative;
}

.cyan-box {
    display:block;
    height:auto;
    position:absolute;
    z-index:1;
    top:0;
    left:0;
    width:654px;
    height:654px;
}

.black-box {
    width:144px;
    height:84px;
    position:absolute;
    z-index:2;
}

Answer 1

你不小心创造了多么奇妙的视错觉！

但实际上，left: 50% 工作正常。虽然看起来 .black-box 以 .cyan-box 为中心，但实际上 left: 50% 正在将 .black-box 的最左侧（而不是您期望的中心）移动到 .yellow-box。将 transform: translate(-50%); 添加到 .black-box 即可轻松解决此问题。这将 .black-box 向后移动其宽度的 50%，这真正使其以其父项为中心。

.black-box {
  width: 144px;
  height: 84px;
  position: absolute;
  z-index: 2;
  background: black;
  left: 50%;
  transform: translate(-50%);
}
.yellow-box {
  height: 498px;
  width: 33.33333333%;
  position: relative;
  background: yellow;
  margin-bottom: 20px;
}
.cyan-box {
  display: block;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 654px;
  height: 654px;
  background: cyan;
}
.half {
  width: 50%;
  border-right: 1px black solid;
  height: 100%;
}

<div class="yellow-box">
  <div class="black-box">
  </div>
  <div class="cyan-box">
  </div>
  <div class="half"></div>
</div>

当页面大小发生变化时，这种错觉就破灭了。我在中间添加了一条线，这样您就可以看到 .yellow-box.

的中间部分

这里是example比较差异。

.yellow-box {
  height: 100px;
  width: 33.33333333%;
  position: relative;
  background: yellow;
  margin-bottom: 20px;
}
.cyan-box {
  display: block;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 654px;
  height: 100px;
  background: cyan;
}
.black-box {
  width: 144px;
  height: 84px;
  position: absolute;
  z-index: 2;
  background: black;
  left: 50%;
}
.black-box-two {
  width: 144px;
  height: 84px;
  position: absolute;
  z-index: 2;
  background: black;
  left: 50%;
  transform: translate(-50%);
}
.half {
  width: 50%;
  border-right: 1px black solid;
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
}

<div class="yellow-box">
  <div class="black-box">
  </div>
  <div class="cyan-box">
  </div>
  <div class="half"></div>
</div>
<div class="yellow-box">
  <div class="black-box-two">
  </div>
  <div class="cyan-box">
  </div>
  <div class="half"></div>
</div>

所以 .black-box 根本没有真正对齐它的兄弟姐妹，它只是看起来那样。

如果您希望能够使用 margin: 0 auto，那么您需要在 .black-box 上使用 position: relative。边距对绝对定位元素没有影响。

.yellow-box {
  height: 498px;
  width: 33.33333333%;
  position: relative;
  background: yellow;
  margin-bottom: 20px;
  overflow: hidden;
}
.cyan-box {
  display: block;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 654px;
  height: 654px;
  background: cyan;
}
.black-box {
  width: 144px;
  height: 84px;
  position: relative;
  z-index: 2;
  background: black;
  margin: 0 auto;
}
.half {
  width: 50%;
  border-right: 1px black solid;
  height: 100%;
}

<div class="yellow-box">
  <div class="black-box">
  </div>
  <div class="cyan-box">
  </div>
  <div class="half"></div>
</div>

如果您使用 position: relative 而不是 position: absolute，边距将再次生效。如果愿意，您甚至还可以使用 top、right、bottom 和 left。

这是一个 example 将两种可行的解决方案与您提供的代码进行对比（左侧使用 transform: translate(-50%)，中间是原始代码，右侧使用 margin: 0 auto）。

.yellow-box {
  height: 100px;
  width: 30%;
  position: relative;
  background: yellow;
  margin-bottom: 20px;
  overflow: hidden;
}
.cyan-box {
  display: block;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 654px;
  height: 100px;
  background: cyan;
}
.black-box {
  width: 144px;
  height: 84px;
  position: relative;
  z-index: 2;
  background: black;
  margin: 0 auto;
}
.black-box-two {
  width: 144px;
  height: 84px;
  position: absolute;
  z-index: 2;
  background: black;
  left: 50%;
  margin: 0 auto;
}
.black-box-three {
  width: 144px;
  height: 84px;
  position: absolute;
  z-index: 2;
  background: black;
  left: 50%;
  transform: translate(-50%);
}
.half {
  width: 50%;
  border-right: 1px black solid;
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  justify-content: space-between;
}

<div class="yellow-box">
  <div class="black-box">
  </div>
  <div class="cyan-box">
  </div>
  <div class="half"></div>
</div>
<div class="yellow-box">
  <div class="black-box-two">
  </div>
  <div class="cyan-box">
  </div>
  <div class="half"></div>
</div>
<div class="yellow-box">
  <div class="black-box-three">
  </div>
  <div class="cyan-box">
  </div>
  <div class="half"></div>
</div>

为什么我的元素与它的兄弟元素对齐？又名溢出：隐藏在 Parent 左侧中断：Children 50%

Why does my element align itself to its sibling? aka overflow: hidden on Parent breaks left: 50% on Children

html

css

margin

overflow