Anleitung zur Zentrierung eines Elements
In diesem Leitfaden erfahren Sie, wie Sie ein Element innerhalb eines anderen Elements sowohl horizontal als auch vertikal zentrieren können.
Eine Box zentrieren
Um eine Box innerhalb einer anderen Box mit CSS zu zentrieren, müssen Sie die CSS-Box-Ausrichtungs- Eigenschaften auf den übergeordneten Container anwenden. Da diese Ausrichtungseigenschaften noch keine Browser-Kompatibilität für Block- und Inline-Layouts haben, müssen Sie den übergeordneten Container zu einem flex- oder grid- Container machen, um die Möglichkeit zur Verwendung der Ausrichtung zu aktivieren.
Im folgenden Beispiel haben wir dem übergeordneten Container display: flex gegeben; dann haben wir justify-content auf center gesetzt, um es horizontal auszurichten, und align-items auf center, 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: white;
}
Hinweis:
Diese Technik können Sie verwenden, um jegliche Art von Ausrichtung eines oder mehrerer Elemente innerhalb eines anderen vorzunehmen. Im obigen Beispiel können Sie versuchen, die Werte zu ändern, um beliebige gültige Werte für justify-content und align-items zu setzen.