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.

Eine Box zentrieren

Um eine Box innerhalb einer anderen Box mithilfe von CSS zu zentrieren, müssen Sie die CSS box alignment-Eigenschaften auf den übergeordneten Container anwenden. Da diese Ausrichtungseigenschaften noch keine Browser-Unterstützung 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 untenstehenden Beispiel haben wir dem übergeordneten Container display: flex gegeben; 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 von Ausrichtung von einem oder mehreren Elementen innerhalb eines anderen zu bewerkstelligen. Im obigen Beispiel können Sie versuchen, die Werte auf alle gültigen Werte für justify-content und align-items zu ändern.

Siehe auch