Anleitung zur Zentrierung eines Elements

In diesem Leitfaden erfahren Sie, wie Sie ein Element sowohl horizontal als auch vertikal innerhalb eines anderen Elements zentrieren können.

Ein Kästchen zentrieren

Um ein Kästchen innerhalb eines anderen mit CSS zu zentrieren, müssen Sie die CSS-Box-Ausrichtungs-Eigenschaften auf dem übergeordneten Container verwenden. Da diese Ausrichtungseigenschaften noch keine Unterstützung in Browsern für Block- und Inline-Layouts haben, müssen Sie den übergeordneten Container zu einem flex- oder grid-Container machen, um die Möglichkeit der Ausrichtung zu aktivieren.

Im folgenden Beispiel haben wir dem übergeordneten Container display: flex zugewiesen; dann justify-content auf center gesetzt, um es horizontal auszurichten, und align-items auf center gesetzt, um es vertikal auszurichten.

html
<div class="wrapper">
  <div class="box">center me!</div>
</div>
css
.wrapper {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box {
  background-color: rgb(69 164 181);
  border-radius: 5px;
  padding: 10px;
  color: #fff;
}

Hinweis: Sie können diese Technik verwenden, um jede Art der Ausrichtung eines oder mehrerer Elemente innerhalb eines anderen durchzuführen. Im obigen Beispiel können Sie versuchen, die Werte auf beliebige gültige Werte für justify-content und align-items zu ändern.

Siehe auch