在flexbox中垂直对齐文本

Question

我目前正在制作使用flexbox的标签。然而，我无法弄清楚如何在标签内垂直对齐！我试过将.tabs-items各种弹性组件放到中心位置，但它似乎不受影响？

HTML

<div class="tabs">
  <div class="tabs-item">
    <h3>75</h3>
  </div>
  <div class="tabs-item">
    <h3>75</h3>
  </div>
  <div class="tabs-item">
    <h3>75</h3>
  </div>
  <div class="tabs-item">
    <h3>75</h3>
  </div>
</div>

和CSS

.tabs {
    color: white;
    padding: 10px 10px 0px 10px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;                                      
    justify-content: center;
    text-align: center;
  }

.tabs h3 {
    font-weight: bold;
    font-size: 19px;
}

.tabs p {
    font-weight: lighter;
    font-size: 19px;
}

.tabs-item {
    background: black;
    flex: 1 1 auto;
    height: 50px;
}

.tabs-item:first-child {
    border-radius: 15px 0 0 0;
}

.tabs-item:last-child {
    border-radius: 0 15px 0 0;
}

.tabs-item:hover {
    opacity: 0.8;
}