Flexbox: horizontal und vertikal zentrieren

So zentrieren Sie Elemente vertikal und horizontal in Flexbox

Nachfolgend finden Sie zwei allgemeine Zentrierungslösungen.

Eine für vertikal ausgerichtete Flex-Elemente (flex-direction: column) und die andere für horizontal ausgerichtete Flex-Elemente (flex-direction: row).

In beiden Fällen kann die Höhe der zentrierten Divs variabel sein, undefiniert, unbekannt, was auch immer. Die Höhe der zentrierten Divs spielt keine Rolle.

Hier ist der HTML-Code für beide:

<div id="container"><!-- flex container -->

    <div class="box" id="bluebox"><!-- flex item -->
        <p>DIV #1</p>
    </div>

    <div class="box" id="redbox"><!-- flex item -->
        <p>DIV #2</p>
    </div>

</div>

CSS (ohne dekorative Stile)

Wenn flexible Elemente vertikal gestapelt werden:

#container {
    display: flex;           /* establish flex container */
    flex-direction: column;  /* make main axis vertical */
    justify-content: center; /* center items vertically, in this case */
    align-items: center;     /* center items horizontally, in this case */
    height: 300px;
}

.box {
    width: 300px;
    margin: 5px;
    text-align: center;     /* will center text in <p>, which is not a flex item */
}

DEMO

Wenn flexible Elemente horizontal gestapelt werden:

Passen Sie die flex-direction -Regel aus dem obigen Code an.

#container {
    display: flex;
    flex-direction: row;     /* make main axis horizontal (default setting) */
    justify-content: center; /* center items horizontally, in this case */
    align-items: center;     /* center items vertically, in this case */
    height: 300px;
}

DEMO

Zentrieren des Inhalts der Flex-Elemente

Der Umfang eines flexiblen Formatierungskontexts ( ) ist auf eine Eltern-Kind-Beziehung beschränkt. Nachkommen eines Flex-Containers außerhalb der Kinder nehmen nicht am Flex-Layout teil und ignorieren die Flex-Eigenschaften. Flex-Eigenschaften sind im Wesentlichen für die Kinder nicht vererbbar.

Daher müssen Sie immer display: flex oder display: inline-flex auf ein übergeordnetes Element anwenden, um Flex-Eigenschaften auf das untergeordnete Element anzuwenden.

Um Text oder anderen Inhalt eines Flex-Elements vertikal und/oder horizontal zu zentrieren, machen Sie das Element zu einem (verschachtelten) Flex-Container, und wiederholen Sie die Zentrierungsregeln.

.box {
    display: flex;
    justify-content: center;
    align-items: center;        /* for single line flex container */
    align-content: center;      /* for multi-line flex container */
}

Weitere Details hier: Wie wird Text in einer Flexbox vertikal ausgerichtet?

Alternativ können Sie margin: auto auf das Inhaltselement des Flex-Elements anwenden.

p { margin: auto; }

Weitere Informationen zu den Rändern von flex auto finden Sie hier: Methoden zum Ausrichten von Flex-Elementen (siehe Kasten 56).

Zentrieren mehrerer Zeilen von flexiblen Elementen

Wenn ein Flex-Container (aufgrund von Umbruch) mehrere Zeilen aufweist, ist die Eigenschaft align-content für die achsübergreifende Ausrichtung erforderlich.

Aus der Spezifikation:

8.4. Packen von Flex Lines: Die Eigenschaft align-content

Die align-content -Eigenschaft richtet die Linien eines Flex-Containers innerhalb des Flex-Containers aus, wenn in der Querachse mehr Platz vorhanden ist, ähnlich wie justify-content einzelne Elemente innerhalb der Hauptachse ausrichtet. Beachten Sie, dass diese Eigenschaft keinen Einfluss auf einen einzeiligen Flex-Container hat.

Weitere Details hier: Wie funktioniert Flex-Wrap mit align-self, align-items und align-content?

Browser-Unterstützung

Flexbox wird von allen gängigen Browsern unterstützt, außer IE <1 . Einige neuere Browserversionen, wie Safari 8 und IE10, erfordern Herstellerpräfixe . Um schnell Präfixe hinzuzufügen, verwenden Sie Autoprefixer . Weitere Details in diese Antwort .

Zentrierlösung für ältere Browser

Eine alternative Lösung zum Zentrieren mithilfe von CSS-Tabellen und Positionierungseigenschaften finden Sie in der folgenden Antwort: https://stackoverflow.com/a/31977476/3597276

Hinzufügen

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

auf das Containerelement dessen, was Sie zentrieren möchten. Dokumentation: Inhalt ausrichten und Elemente ausrichten .

display: flex;
align-items: center;
justify-content: center;

Vergessen Sie nicht, wichtige browserspezifische Attribute zu verwenden:

align-Items: Center; ->

-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

rechtfertigungsinhalt: Mitte; ->

-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;

Sie können diese beiden Links lesen, um flex besser zu verstehen: http://css-tricks.com/almanac/properties/j/justify-content/ und http://ptb2.me)/flexbox /

Viel Glück.

1 - Setze CSS auf parent div auf display: flex;

2 - Setze CSS auf parent div auf flex-direction: column;
Beachten Sie, dass der gesamte Inhalt in dieser div-Zeile von oben nach unten angezeigt wird. Dies funktioniert am besten, wenn die übergeordnete div nur das untergeordnete und nichts anderes enthält.

3 - Setze CSS auf parent div auf justify-content: center;

Hier ist ein Beispiel, wie das CSS aussehen wird:

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

diplay: flex; für den Container und margin:auto; für den Gegenstand funktioniert perfekt.

HINWEIS: Sie müssen width und height einstellen, um den Effekt zu sehen.

#container{
  width: 100%; /*width needs to be setup*/
  height: 150px; /*height needs to be setup*/
  display: flex;
}

.item{
  margin: auto; /*These will make the item in center*/
  background-color: #CCC;
}

<div id="container">
   <div class="item">CENTER</div>
</div>

Wenn Sie einen Text in einem Link zentrieren müssen, reicht dies aus:

div {
  display: flex;

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

a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center; /* only important for multiple lines */

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

<div>
  <a href="#">text</a>
  <a href="#">text with two lines</a>
</div>

margin: auto funktioniert perfekt mit der Flexbox. Es zentriert vertikal und horizontal.

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

.flex-container {
  display: flex;
    
  height: 100%;
  background-color: green;
}

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS</title>
</head>
<body>
  <div class="flex-container">
    <div class="container">
      <div class="row">
        <span class="flex-item">1</span>
      </div>
      <div class="row">
        <span class="flex-item">2</span>
      </div>
      <div class="row">
        <span class="flex-item">3</span>
      </div>
     <div class="row">
        <span class="flex-item">4</span>
    </div>
  </div>  
</div>
</body>
</html>