我正在使用justify-content：stretch来集中一个flexBox项目的CONTENTS;看来,使用display：table-cell; vertical-align：middle的旧技巧在这种情况下不行.什么是
.flex-container {
display:flex;
align-items:center;
justify-content:stretch;
}
.flex-item {
align-self:stretch;
}
<div class="flex-container">
<div class="flex-item">I want to be vertically centered! But I'm not.</div>
</div>
在你解答之前：似乎对我正在问的问题有很多困惑.我正在设计中心flex项目的CONTENTS.使用合理内容：拉伸,项目的高度将伸展到容器的整个高度,但项目的内容浮动到顶部(至少在Chrome中).
“一张图片胜过千言万语.” (A)是我已经得到的(B)是我想要的
解决方法
可以通过将每个flex项目显示为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 */
}
<div class="flex-container">
<div class="flex-item">
I want to be vertically centered!
<s>But I'm not.</s>
</div>
</div>
作为旁注,如果省略align-items：center;声明.flex-container可以安全地删除align-self：stretch;从flex项目以及.
