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

【问题标题】：Vertically center child element, but allow parent to expand when child overflows垂直居中子元素，但当子元素溢出时允许父元素展开
【发布时间】：2018-02-10 07:50:18
【问题描述】：

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

如图所示：

我可以靠近；孩子上的position: relative 允许我在仍然定位孩子的同时影响父母的身高，但我不知道如何确定正确的位置（top: 50% 加上transform: translateY 对我不起作用，因为父母的身高不固定）。

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

【问题讨论】：

标签： css css-position

【解决方案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>

【讨论】：

感谢您的回答，看起来不错！我无法在星期一之前进行测试，之后我会接受一个有效的答案。