css - 垂直居中子元素，但允许父元素在子元素溢出时展开

Question

我正在寻找解决此问题的纯 css 解决方案。我有一个 parent 和一个 child div。 parent 有最低高度。当子 div 的高度较小时，我希望它在父 div 中垂直居中。但是当子 div 扩展超过父级的最小高度时，我希望父级扩展。

如图所示:

我可以靠近； child 上的 position: relative 允许我影响 parent 的高度，同时仍然定位 child ，但我不知道如何确定正确的位置(top: 50% 加上 transform: translateY 对我不起作用，因为 parent 的高度不固定)。

这个让我难住了!在此先感谢您的任何建议。

Answer 1

您可以使用 flex 轻松地做到这一点:

.container {
  min-height: 300px;
  display: flex;
  background: red;
  justify-content: center; /* Center horizontally */
}

.container>div {
  height: 200px;
  width: 200px;
  background: blue;
  margin: auto; /* Center vertically */
}

<div class="container">
  <div>some content</div>
</div>

更大的内容高度:

.container {
  min-height: 300px;
  display: flex;
  background: red;
  justify-content: center;
}

.container>div {
  height: 800px;
  width: 200px;
  background: blue;
  margin: auto;
}

<div class="container">
  <div>some content</div>
</div>