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.
<div class="wrapper">
<div class="box">center me!</div>
</div>
.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.