如何垂直居中Flexbox项目的内容

我正试图在使用时将Flexbox项目的内容居中justify-content:stretch;.看来旧的使用技巧display:table-cell;vertical-align:middle;在这种情况下不起作用.什么

.flex-container {
    display:flex;
    align-items:center;
    justify-content:stretch;
}
.flex-item {
    align-self:stretch;
}


    
I want to be vertically centered! But I'm not.

在你回答之前:对于我的要求似乎有很多困惑.我正试图将flex项目的内容居中.使用时justify-content:stretch,项目的高度将延伸到容器的整个高度,但项目的内容会浮动到顶部(至少在Chrome中).

"一张图片胜过千言万语." (A)是我已经得到的.(B)是我想要的.

可以display通过将每个弹性项目作为flex容器,然后按align-items属性垂直对齐内容来实现,如下所示:

.flex-container {
  display:flex;
  align-items:center;
  height: 200px; /* for demo */
}

.flex-item {
  align-self:stretch;
  display:flex;
  align-items:center;
  background-color: gold; /* for demo */
}

    

      I want to be vertically centered!
      But I'm not.