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

Question

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

此图片中的插图：

我可以接近;孩子position: relative允许我在定位孩子的同时影响父高，但我无法弄清楚如何确定正确的位置（top: 50%加transform: translateY赢了＆＃ 39;因为父母的身高没有固定，所以对我有用。

这个让我难过！在此先感谢您的任何建议。

Answer 1

您可以使用flex轻松完成此操作：

＆＃13;

＆＃13;

.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 */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

内容高度越大：

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;