Wie kann man Text in einem Flexbox vertikal zentrieren?

Question

Ich möchte Flexbox verwenden, um einige Inhalte innerhalb eines

• vertikal auszurichten, habe aber keinen großen Erfolg.

  Ich habe online nachgeschaut und viele der Tutorials verwenden tatsächlich einen Wrapper-Div, der die align-items:center aus den Flex-Einstellungen des Elternelements erhält, aber ich frage mich, ob es möglich ist, dieses zusätzliche Element wegzulassen?

  Ich habe mich in diesem Fall für Flexbox entschieden, da die Höhe des Listenelements dynamisch in % sein wird.

  * {
    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%;
  }
  
    Dies ist der Text

Answer 1

.flex-container {
  display: flex;
  height: 300px;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.flex-child {
  display: flex;
  width: 100%;
  background-color: khaki;
  border: 1px solid #000;
  align-items: center;
  justify-content: center;
  height: 100px;
  margin: 10px;
  padding: 10px;
}

  Englisch
  Englisch
  Englisch

Answer 2

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

  Dies ist der Text

Answer 3

Sie könnten die Anzeigen von ul und li in tabelle und tabelle-cell ändern. Dann würde vertical-align für Sie funktionieren:

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

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

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