Flexbox: horizontal und vertikal zentrieren

Question

Wie man ein div horizontal und vertikal innerhalb des Containers zentriert, mit flexbox. Im unten stehenden Beispiel möchte ich, dass jede Zahl untereinander (in Reihen) zentriert ist.

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
row {
  width: 100%;
}
.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

    1

    2

    3

    4

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

Answer 1

Verwenden Sie dies:

   html, body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
   }

für eine HTML-Markierung wie diese:

           abc 
           etwas 

   html, body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
   }

           abc 
           etwas

Answer 2

1 - Legen Sie CSS auf das übergeordnete

display: flex;

2 - Legen Sie CSS auf das übergeordnete

flex-direction: column;
Beachten Sie, dass dadurch alle Inhalte innerhalb dieses

von oben nach unten ausgerichtet werden. Dies funktioniert am besten, wenn das übergeordnete

nur das Kind und nichts anderes enthält.

3 - Legen Sie CSS auf das übergeordnete

justify-content: center;

Hier ist ein Beispiel, wie das CSS aussehen wird:

.parentDivClass {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Answer 3

diplay: flex; für seinen Container und margin:auto; für sein Element funktioniert perfekt.

HINWEIS: Sie müssen die Breite und Höhe einrichten, um den Effekt zu sehen.

#container{
  width: 100%; /*Die Breite muss eingerichtet werden*/
  height: 150px; /*Die Höhe muss eingerichtet werden*/
  display: flex;
}

.item{
  margin: auto; /*Dies wird das Element in die Mitte bringen*/
  background-color: #CCC;
}

   MITTE

Answer 4

margin: auto funktioniert "perfekt" mit Flexbox, d.h. es erlaubt es, ein Element vertikal und horizontal zu zentrieren.

html, body {
  height: 100%;
  max-height: 100%;
}

.flex-container {
  display: flex;

  height: 100%;
  background-color: green;
}

.container {
  display: flex;
  margin: auto;
}

  JS

        1

        2

        3

        4

Answer 5

Wenn Sie einen Text in einem Link zentrieren müssen, ist dies der Trick:

div {
  display: flex;

  width: 200px;
  height: 80px;
  background-color: yellow;
}

a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center; /* nur wichtig für mehrere Zeilen */

  padding: 0 20px;
  background-color: silver;
  border: 2px solid blue;
}

  text
  text mit zwei Zeilen