Как вертикально центрировать содержимое элемента 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;
}

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

ПЕРЕД ВАМИ ОТВЕТ: Кажется, у меня много путаницы в том, что я прошу. Я пытаюсь центрировать СОДЕРЖАНИЕ гибкого элемента. При justify-content:stretch высота элемента будет растягиваться до полной высоты контейнера, но содержимое элемента будет плавать вверх (по крайней мере, в Chrome).

"Картина стоит тысячи слов". (А) это то, что у меня уже есть. (B) - это то, что я хочу. enter image description here

Ответы

Ответ 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>

Ответ 2

Я не уверен, правильно ли я интерпретирую ваш запрос, но я думаю, что вы пытаетесь использовать "justify-content: stretch;" когда вы должны использовать flex-grow.

Im мой образец Я использовал flex: 1 auto; который является просто сокращенным, чтобы установить пару свойств гибкости.

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