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

Setzen Sie die Anzeige in li als flex und setzen Sie align-items auf center.

li {
  display: flex;

  /* Elemente vertikal ausrichten */
  align-items: center;

  /* Elemente horizontal ausrichten */
  justify-content: center;

}

Ich würde persönlich auch Pseudo-Elemente ansprechen und border-box verwenden (Universal-Selektor * und Pseudo-Elemente)

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

Answer 2

Mit display: flex können Sie die vertikale Ausrichtung von HTML-Elementen steuern.

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

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

  Hello
  World

Answer 3

Align-self richtet die Elemente nicht innerhalb des li aus. Stattdessen richtet es das li als Ganzes aus.

Die Verwendung von align-items würde den Text innerhalb des li ausrichten. Überprüfen Sie diesen Code. Es funktioniert.

* {
  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 4

* {
  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 5

Es hängt von der Höhe deiner li ab, ruf einfach noch eine Sache an, die Zeilenhöhe

* {
  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:50px;line-height:50px;
}

  Das ist der Text