我試圖在使用justify-content:stretch時將flexbox項目的內容居中；看來使用顯示的老把戲:表格單元格；垂直對齊:居中；在這種情況下不管用。什么會？

.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>

在你回答之前:對于我的問題，似乎有很多困惑。我正在嘗試將彈性項目的內容居中。使用justify-content:st retch，項目的高度將延伸到容器的整個高度，但項目的內容將浮動到頂部(至少在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>

我不確定我是否正確地解釋了你的要求，但是我認為你試圖使用“調整-內容:伸展；何時應該使用flex-grow。

Im我的樣本我用flex:1 auto；這只是設置幾個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/

Flex屬性: https://developer.mozilla.org/en-US/docs/Web/CSS/flex

div-box的文本是一個匿名的內聯(lián)節(jié)點。如果要將文本框中的文本居中，可以使用:

display: flex;
    align-items:center;

確保沒有自我結盟會破壞你的結果。

*{
    box-sizing:border-box;
    padding:5px;
}
.flex-container {
    border: 1px solid;
    display:flex;

    height: 200px;
}
.flex-item {
    flex: 1 auto;
    border: 1px solid green;
    align-self:stretch;
    display:flex;
    justify-content:center;
}
.flex-center {
    align-items: center;
}
.flex-center div {
  border: 1px solid blue;
}

<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 style="align-self:start;">
          I want to be vertically centered too! But align-self broke it!
        </div>
        <span style="align-self:middle; color:red;">Hallo. I am a centered text. </span>
    </div>
</div>