¿Cómo alinear verticalmente el texto dentro de un flexbox?

Me gustaría usar flexbox para alinear verticalmente parte del contenido dentro de, <li>pero no tener gran éxito.

Lo revisé en línea y muchos de los tutoriales en realidad usan un envoltorio div que obtiene la align-items:centerconfiguración de flex en el padre, pero me pregunto si es posible cortar este elemento adicional.

He optado por usar flexbox en este caso, ya que la altura del elemento de la lista será dinámica %.

* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
}

ul {
  height: 100%;
}

li {
  display: flex;
  justify-content: center;
  align-self: center;
  background: silver;
  width: 100%;
  height: 20%;
}

<ul>
  <li>This is the text</li>
</ul>

En lugar de usar el align-self: centeruso align-items: center.

No hay necesidad de cambiar flex-directiono usar text-align.

Aquí está su código, con un ajuste, para que todo funcione:

ul {
  height: 100%;
}

li {
  display: flex;
  justify-content: center;
  /* align-self: center;    <---- REMOVE */
  align-items: center;   /* <---- NEW    */
  background: silver;
  width: 100%;
  height: 20%; 
}

La align-selfpropiedad se aplica a artículos flexibles . Excepto que su lino es un elemento flexible porque su padre - el ul- no tiene display: flexni display: inline-flexaplicado.

Por lo tanto, ulno es un contenedor flexible, lino es un elemento flexible y align-selfno tiene ningún efecto.

La align-itemspropiedad es similar a align-self, excepto que se aplica a contenedores flexibles .

Dado que lies un contenedor flexible, align-itemsse puede utilizar para centrar verticalmente los elementos secundarios.

* {
  padding: 0;
  margin: 0;
}
html, body {
  height: 100%;
}
ul {
  height: 100%;
}
li {
  display: flex;
  justify-content: center;
  /* align-self: center; */
  align-items: center;
  background: silver;
  width: 100%;
  height: 20%;
}

<ul>
  <li>This is the text</li>
</ul>

demostración de codepen

Técnicamente, así es como align-itemsy cómo align-selffunciona ...

La align-itemspropiedad (en el contenedor) establece el valor predeterminado de align-self(en los elementos). Por lo tanto, align-items: centersignifica que todos los elementos flexibles se establecerán en align-self: center.

Pero puede anular este valor predeterminado ajustando los align-selfelementos individuales.

Por ejemplo, es posible que desee columnas de igual altura, por lo que el contenedor se establece en align-items: stretch. Sin embargo, un elemento debe estar fijado en la parte superior, por lo que está configurado en align-self: flex-start.

ejemplo

¿Cómo es el texto un elemento flexible?

Algunas personas pueden preguntarse cómo una serie de textos ...

<li>This is the text</li>

es un elemento hijo de li.

La razón es que el texto que no está envuelto explícitamente por un elemento de nivel en línea está envuelto algorítmicamente por un cuadro en línea. Esto lo convierte en un elemento en línea anónimo y secundario del padre.

De la especificación CSS:

9.2.2.1 Cuadros anónimos en línea

Cualquier texto que esté contenido directamente dentro de un elemento contenedor de bloques debe tratarse como un elemento anónimo en línea.

La especificación flexbox proporciona un comportamiento similar.

4. Artículos flexibles

Cada elemento secundario en flujo de un contenedor flexible se convierte en un elemento flexible, y cada corrida contigua de texto que está contenida directamente dentro de un contenedor flexible se envuelve en un elemento flexible anónimo.

Por lo tanto, el texto en el lies un elemento flexible.

La respuesta más votada es para resolver este problema específico publicado por OP, donde el contenido (texto) estaba envuelto dentro de un inline-blockelemento. Algunos casos pueden ser sobre centrar un elemento normal verticalmente dentro de un contenedor , que también se aplica en mi caso, por lo que para eso todo lo que necesita es:

align-self: center;

El mejor movimiento es simplemente anidar una caja flexible dentro de una caja flexible . Todo lo que tienes que hacer es darle al niño align-items: center. Esto alineará verticalmente el texto dentro de su padre.

// Assuming a horizontally centered row of items for the parent but it doesn't have to be
.parent {
  align-items: center;
  display: flex;
  justify-content: center;
}

.child {
  display: flex;
  align-items: center;
}

RESULTADO

HTML

<ul class="list">
  <li>This is the text</li>
  <li>This is another text</li>
  <li>This is another another text</li>
</ul>

Use en align-itemslugar de align-selfy también agregué flex-directiona column.

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

.list {
  display: flex;
  justify-content: center;
  flex-direction: column;  /* <--- I added this */
  align-items: center;   /* <--- Change here */
  height: 100px;
  width: 100%;
  background: silver;
}

.list li {  
  background: gold;
  height: 20%; 
}

Utilizando display: flexpuede controlar la alineación vertical de elementos HTML.

.box {
  height: 100px;
  display: flex;
  align-items: center; /* Vertical */
  justify-content: center; /* Horizontal */
  border:2px solid black;
}

.box div {
  width: 100px;
  height: 20px;
  border:1px solid;
}

<div class="box">
  <div>Hello</div>
  <p>World</p>
</div>

Se podría cambiar el uly lipantallas para tabley table-cell. Entonces, vertical-alignfuncionaría para ti:

ul {
    height: 20%;
    width: 100%;
    display: table;
}

li {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    background: silver;
    width: 100%; 
}

http://codepen.io/anon/pen/pckvK