Anleitung zum Zentrieren eines Elements

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

Ein Feld zentrieren

Um ein Feld innerhalb eines anderen mit CSS zu zentrieren, müssen Sie die CSS-Box-Ausrichtungs-Eigenschaften auf den übergeordneten Container anwenden. Da diese Ausrichtungseigenschaften noch keine Browser-Unterstützung für Block- und Inline-Layout haben, müssen Sie den übergeordneten Container zu einem flex- oder grid-Container machen, um die Möglichkeit zur Verwendung von Ausrichtungen zu aktivieren.

Im folgenden Beispiel haben wir dem übergeordneten Container display: flex zugewiesen; dann wurde 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: Diese Technik kann verwendet werden, um eine beliebige Art der Ausrichtung von einem oder mehreren Elementen innerhalb eines anderen durchzuführen. In dem obigen Beispiel können Sie die Werte in gültige Werte für justify-content und align-items ändern.

Siehe auch