html - 为什么我的元素与它的兄弟元素对齐？又名溢出 : hidden on Parent breaks left: 50% on Children

Question

下面是我的图表的简要说明(如下所示):
黄色框是父级。
黑色和青色盒子是黄色盒子的 child 。
多余的青色框由其父级通过overflow: hidden

隐藏

由于 overflow: hidden 打破了 margin: auto，我尝试使用 left 将黑框居中到其父框(即黄色框) : 50%。然而，黑框与青色框的整个宽度对齐。

有人可以解释另一种方法，我可以将黑框与其父框的宽度对齐吗？我也会接受修复 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根本没有真正对齐它的 sibling ，它只是看起来那样。

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

.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>