html - vertical - centrar texto horizontalmente css

Cómo centrar verticalmente el contenido de un elemento de flexbox

Question

Estoy tratando de centrar los CONTENIDOS de un elemento de flexbox mientras uso justify justify-content:stretch; Parece que el viejo truco de usar display:table-cell;vertical-align:middle; No funciona en esta situación. ¿Que hace?

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

ANTES DE CONTESTAR: Parece haber mucha confusión sobre lo que estoy preguntando. Estoy tratando de centrar los CONTENIDOS del ítem flexible. Con justify-content:stretch , la altura del elemento se extenderá hasta la altura total del contenedor, pero el contenido del elemento flotará hacia la parte superior (al menos en Chrome).

"Una imagen vale mas que mil palabras." (A) es lo que ya tengo. (B) es lo que quiero.

Answer 1

No estoy seguro de si estoy interpretando tu solicitud correctamente, pero creo que estás tratando de usar "justify-content: stretch"; Cuando deberías usar flex-grow.

Im mi muestra utilicé flex: 1 auto; que es sólo una taquigrafía para establecer un par de propiedades de flexión.

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/

Propiedad de la flexión:
https://developer.mozilla.org/en-US/docs/Web/CSS/flex

Answer 2

Se puede lograr display cada elemento flexible como un contenedor flex y luego alineando los contenidos verticalmente mediante la propiedad align-items , de la siguiente manera:

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

Como nota al margen, si omite los elementos de align-items:center; declaración del .flex-container que puede eliminar con seguridad align-self:stretch; de elementos flexibles también.