Wie kann man den Inhalt vertikal und horizontal mit Flexbox zentrieren

Die Entwickler können sicherstellen, dass die Zentrierung von Inhalten eine der schwierigsten Aufgaben im CSS-Layout ist. CSS Flexbox ermöglicht nun eine bessere Kontrolle über die Ausrichtung von HTML-Elementen, einschließlich der Zentrierung aller gewünschten Elemente.

Nun zeigen wir mit den folgenden Schritten, wie einfach es ist, Inhalte vertikal und horizontal zu zentrieren.

Lassen Sie uns ein Beispiel betrachten:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      #big-box{
      width: 200px;
      height: 200px;
      background-color: #666666;
      }
      #small-box{
      width: 100px;
      height: 100px;
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Zentrierter Inhalt</h2>
    <div id="big-box">
      <div id="small-box"></div>
    </div>
  </body>
</html>

Hier haben wir zwei Div-Elemente. Unsere Aufgabe ist es, die ID "small-box" innerhalb der ID "bix-box" zu zentrieren.

  1. Verwenden Sie zunächst die Eigenschaft width, um die Breite für zwei Boxen festzulegen. Ändern Sie die Breite entsprechend der Größe, die Sie brauchen.
  2. Stellen Sie dann die Höhe der Boxen mithilfe der Eigenschaft height ein.
  3. Stellen Sie Ihre bevorzugten Farben für die divs mithilfe der Eigenschaft background-color ein.
#big-box{
width: 200px;
height: 200px;
background-color: #666666;
}
#small-box{
width: 100px;
height: 100px;
background-color: #8ebf42;
}
  1. Der nächste Schritt besteht darin, das Layout durch Einstellen der Eigenschaft display festzulegen. Um Flexbox zu verwenden, stellen Sie die Anzeige: flex. (display: -Webkit-flex;) ein.
#big-box{
width: 200px;
height: 200px;
background-color: #666666;
display: flex;
display: -webkit-flex;
}
Der Flex-Wert muss mit der Erweiterung -webkit- für Safari, Google Chrome und Opera verwendet werden.

Es ändert sich nichts, wenn Sie diesen Code ausführen. Folgen Sie den nächsten Schritten!

  1. Fügen Sie die Eigenschaft align-items hinzu. Die Eigenschaft align-items legt die vertikale Ausrichtung des Inhalts im Flex-Container fest. Wir müssen align-items mit dem Wert "center" einstellen, um den Inhalt vertikal zu zentrieren.
#big-box{
width: 200px;
height: 200px;
background-color: #666666;
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
}

Damit haben wir unser Ziel erreicht!

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      #big-box{
      width: 200px;
      height: 200px;
      background-color: #666666;
      display: flex;
      align-items: center;
      justify-content: center;
      -webkit-align-items: center;
      }
      #small-box{
      width: 100px;
      height: 100px;
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Zentrierter Inhalt</h2>
    <div id="big-box">
      <div id="small-box"></div>
    </div>
  </body>
</html>
Das -Webkit- für Safari, Google Chrome und Opera (neuere Versionen) wird mit der Eigenschaft align-items verwendet.

Lassen Sie uns ein weiteres Beispiel betrachten:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flexbox-container {
      background: #cccccc;
      display: flex;
      align-items: center;
      -webkit-align-items: center;
      justify-content: center;
      height: auto;
      margin: 0;
      min-height: 500px;
      }
      .flexbox-item {
      max-height: 50%;
      background: #666666;
      font-size: 15px;
      }
      .fixed {
      flex: none;
      max-width: 50%;
      }
      .box {
      width: 100%;
      padding: 1em;
      background: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Zentrierter Inhalt</h2>
    <div class="flexbox-container">
      <div class="flexbox-item fixed">
        <div class="box">
          <h2>Zentriert durch Flexbox</h2>
          <p contenteditable="true">Diese Box ist sowohl vertikal als auch horizontal zentriert. </p>
        </div>
      </div>
    </div>
  </body>
</html>

Das Feld bleibt zentriert, auch wenn sich der Text ändert, um ihn breiter oder höher zu machen.