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

Question

我正试图在使用时将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;
}

<div class="flex-container">
    <div class="flex-item">I want to be vertically centered! But I'm not.</div>
</div>

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

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

Answer 1

可以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 */
}

<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;从弹性项目中删除.