Anleitung zum Zentrieren eines Elements

In diesem Leitfaden erfahren Sie, wie Sie ein Element in einem anderen Element zentrieren, sowohl horizontal als auch vertikal.

Eine Box zentrieren

Um eine Box innerhalb einer anderen Box mithilfe von CSS zu zentrieren, müssen Sie CSS-Boxausrichtungs-Eigenschaften auf dem übergeordneten Container verwenden. Da diese Ausrichtungseigenschaften noch keine Browserunterstü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 der Ausrichtung nutzen zu können.

Im folgenden Beispiel haben wir dem übergeordneten Container display: flex gegeben; dann justify-content auf center gesetzt, um es horizontal auszurichten, und align-items auf center, 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 irgendeine Art von Ausrichtung von einem oder mehreren Elementen innerhalb eines anderen vorzunehmen. Im obigen Beispiel können Sie die Werte auf beliebige gültige Werte für justify-content und align-items ändern.

Siehe auch