html - 如何创建一个子 div 粘在父 div 的底部边框上，其中 50% 位于父级内部，50% 位于外部

Question

我想要一个子 div 在边框上粘在父 div 的底部。类似于下面的 div。但我希望红色 div 应该始终位于垂直边框的中心，这意味着子 div 应该贴在父 div 的底部边框上，其中 50% 在父级内部，50% 在外部。因此，如果父 div 的高度发生变化，红色仍会垂直居中。

我的做法是给 bottom: -20px，但如果我改变父级的高度，那么 div 将不会保持在垂直于底部边框的中心。

这是我想出的代码。

.parent {
  position: absolute;
  background-color:black;
  width: 200px;
  height: 200px
}

.another-parent {
  position: relative;
  float:right;
  background-color:black;
  width: 200px;
  height: 70px
}

.child {
  position: absolute;
  background-color: red;
  width: 50px;
  height: 50px;
  bottom: -20px;
}

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

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

Answer 1

您可以更改高度，子 div 将保持在原位。 parent 天后需要被赋予 position: relative。

.parent {
  position: relative;
  background-color:black;
  width: 200px;
  height: 200px
}

.child {
  position: absolute;
    background-color: red;
    width: 50px;
    height: 50px;
    bottom: -25px;
    right: 75px;
}

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