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

En Lugar de utilizar align-self: center uso align-items: center.

No hay necesidad de cambiar flex-direction o usar text-align (como se sugiere en otra respuesta).

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%; 
}

El align-self la propiedad se aplica a elementos flexibles . Excepto que su li no es un elemento flexible porque su padre – el ul – no tiene display: flex o display: inline-flex aplicado.

Por lo tanto, el ul no es un flex contenedor, el li no es un elemento flexible, y align-self no tiene ningún efecto.

El align-items la propiedad es similar a align-self, excepto que se aplica a flex containers.

Dado que el li es un contenedor flexible, align-items se puede usar 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>

Codepen demo

Técnicamente, así es como align-items y align-self funcionan...

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

Pero puede anular este valor predeterminado ajustando el align-self en elementos 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 ser fijado a la parte superior, por lo que se establece en align-self: flex-start.

Ejemplo

Cómo es el texto un flex ¿artículo?

Algunas personas pueden preguntarse cómo una racha de texto...

<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 una caja en línea. Esto lo convierte en un elemento inline anónimo e hijo del padre.

De la especificación CSS:

9.2.2.1 Anónimo en línea recuadros

Cualquier texto que está contenido directamente dentro de un elemento contenedor de bloque debe tratarse como un elemento inline anónimo.

La especificación flexbox proporciona un comportamiento similar.

4. Artículos Flexibles

Cada hijo en flujo de un contenedor flex se convierte en un elemento flex, y cada ejecución contigua de texto que está contenido directamente dentro de un flex el contenedor está envuelto en un elemento flexible anónimo.

Por lo tanto, el texto en el li es un artículo flexible.

Para futuros Googlers,

La respuesta más votada y la segunda más votada también, son para resolver este problema específico publicado por OP, donde el contenido(texto) estaba siendo "aliado algorítmico" envuelto dentro del elemento de bloque en línea. PERO, su caso puede ser sobre centrando un elemento normal verticalmente dentro de un contenedor, que también se aplica en mi caso, por lo que todo lo que necesita es

align-self: center;

Simplemente poniendo esto aquí, ya que este es el mejor resultado para el mencionado consulta y también estaba bastante confundido durante bastante tiempo * Derp *

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

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

Puede cambiar las pantallas ul y li a table y table-cell. Entonces, vertical-align trabajarí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