关于剩余的垂直空间垂直居中

Question

我真的不知道怎么把话放在那上面但是如果你看看这个fiddle，我希望“小值”线在它的空间中垂直居中。

我称之为空间的是“标题”所没有的东西。我试图将它的行高设置为3em，但它没有帮助。

HTML

<div id="parent">
  <div class="child">
    <div class="title">
      Title
    </div>
    <div class="value big">
      Big value
    </div>
  </div>
  <div class="child">
    <div class="title">
      Title
    </div>
    <div class="value">
      Small value
    </div>
  </div>
</div>

CSS

#parent {
  box-sizing: border-box;
  max-height: 100%;
  display: flex;
  flex-direction: row;
  place-content: stretch center;
  align-items: stretch;
}

.child {
  margin: 0 10px;
  box-sizing: border-box;
  padding: 10px;
  flex: 0 0 auto;
  box-sizing: border-box;
  max-width: none;
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}

.child .title {
  font-size: 1.5em;
  color: grey;
}

.child .value {
  font-size: 1.5em;
  color: black;
}

.value.big {
  font-size: 3em;
}

Answer 1

你可以使.child成为一个灵活的容器。

然后将值居中，将margin: auto添加到.value

fiddle

#parent {
  box-sizing: border-box;
  max-height: 100%;
  display: flex;
  flex-direction: row;
  place-content: stretch center;
  align-items: stretch;
}

.child {
  margin: 0 10px;
  box-sizing: border-box;
  padding: 10px;
  flex: 0 0 auto;
  box-sizing: border-box;
  max-width: none;
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
}

.child .title {
  font-size: 1.5em;
  color: grey;
}

.child .value {
  font-size: 1.5em;
  color: black;
  margin: auto;
}

.value.big {
  font-size: 3em;
}

<div id="parent">
  <div class="child">
    <div class="title">
      Title
    </div>
    <div class="value big">
      Big value
    </div>
  </div>
  <div class="child">
    <div class="title">
      Title
    </div>
    <div class="value">
      Small value
    </div>
  </div>
</div>