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

Question

我试图在使用 justify-content:stretch; 时将 flexbox 项目的内容居中看来使用 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>

在你回答之前： 我的问题似乎很混乱。我试图将弹性项目的 CONTENTS 居中。使用justify-content:stretch，项目的高度将拉伸到容器的全高，但项目的内容浮动到顶部（至少在Chrome).

"A picture is worth a thousand words." (A) 是我已经得到的。 (B) 是我想要的。

Answer 1

可以通过display将每个flex item作为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>

作为旁注，如果您省略 .flex-container 的 align-items:center; 声明，您也可以安全地从 flex 项目中删除 align-self:stretch;。

Answer 2

我不确定我是否正确解释了您的请求，但我认为您在应该使用 flex-grow 的时候尝试使用 "justify-content:stretch;"。

在我的示例中，我使用了 flex:1 auto；这只是 shorthand 设置几个 flex 属性。

HTML:

<div class="flex-container">
    <div class="flex-item">I'm top dog!
    </div>
    <div class="flex-item flex-center">
        I want to be vertically centered! And I am!
    </div>
</div>

CSS:

*{
    box-sizing:border-box;
    padding:5px;
}
.flex-container {
    border: 1px solid;
    display:flex;
    align-items:center;
    height: 100px;
}
.flex-item {
    flex: 1 auto;
    border: 1px solid green;
    height:100%;
    display:flex;
    justify-content:center;
}
.flex-center {
    align-items: center;
}

http://jsfiddle.net/p28tjskq/

弹性属性:
https://developer.mozilla.org/en-US/docs/Web/CSS/flex

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

How to vertically center the contents of a flexbox item

html

css

vertical-alignment

flexbox