html - 垂直居中两个div

Question

我需要帮助将两个 div 在固定宽度/高度的 div 中垂直居中，其中两个 div 在父 div 的中间缩放。第一个子 div 有一个最大高度，所以它可以动态缩放到一定程度。我怎样才能使它们居中，以便蓝绿色和绿色 div 垂直进入蓝色中间？

JSFiddle 在这里: https://jsfiddle.net/850sdmhj/

.subtext-container {
  position: absolute;
  width: 180px;
  height: 65px;
  color: #ffffff;
  background-color: blue;
  bottom: 0;
}
.color-teal {
  max-height: 40px;
  overflow: hidden;
  background-color: teal;
}
.color-green {
  max-height: 13px;
  font-size: 9px;
  background-color: green;
}

<div class="subtext-container">
  <div class="color-teal">teal</div>
  <div class="color-green">green</div>
</div>

Answer 1

尝试使用 display:flex 属性使其工作。

更新的 CSS:

.subtext-container {
  position: absolute;
  width: 180px;
  height: 65px;
  color: #ffffff;
  background-color: blue;
  bottom: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.color-teal {
  max-height: 40px;
  overflow: hidden;
  background-color: teal;
}

.color-green {
  height: 13px;
  font-size: 9px;
  background-color: green;
}

示例 fiddle :Demo

注意:请检查浏览器支持情况。

浏览器支持: http://caniuse.com/#feat=flexbox