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

ERGEBNIS:

CODE

HTML:

      1

      2

      3

      4

CSS:

html, body {
  height: 100%;  
}

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

.rows {
  display: flex;
  flex-direction: column;
}

wo flex-container div wird verwendet, um Ihren rows div vertikal und horizontal zu zentrieren, und rows div wird verwendet, um Ihre "Elemente" zu gruppieren und sie basierend auf einer Spalte zu ordnen.

Answer 2

Sie können flex-direction: column zum flex-container hinzufügen

.flex-container {
  flex-direction: column;
}

Fügen Sie display:inline-block zum flex-item hinzu

.flex-item {
 display: inline-block;
}

weil Sie width und height hinzugefügt haben, hat dies keine Auswirkung auf dieses Element, da es eine Anzeige von inline hat. Versuchen Sie display:inline-block oder display:block. Erfahren Sie mehr über width und height.

Fügen Sie auch der row-Klasse hinzu (Sie erhalten row{} nicht als Stil)

.row{
  width:100%;
  margin:0 auto;
  text-align:center;
}

Arbeitsdemo in Row :

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content:center;
  flex-direction:column;
}
.row{
  width:100%;
  margin:0 auto;
  text-align:center;
}
.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;
  display: inline-block;
}

    1

    2

    3

    4

Arbeitsdemo in Spalte :

.flex-container {
  padding: 0;
  margin: 0;
  width: 100%;
  list-style: none;
  display: flex;
  align-items: 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;
  display: inline-block;
}

    1

    2

    3

    4

Answer 3

Hoffentlich hilft das.

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

Answer 4

Verwenden CSS+

    Bearbeiten Sie diesen Text...

Schau dir das HIER an