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.
Eine Box zentrieren
Um eine Box innerhalb einer anderen Box mit CSS zu zentrieren, müssen Sie die CSS Box-Alignment-Eigenschaften auf dem übergeordneten Container verwenden. 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 folgenden Beispiel haben wir dem übergeordneten Container display: flex gegeben; dann justify-content auf "center" gesetzt, um ihn horizontal auszurichten, und align-items auf "center" gesetzt, um ihn 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:
Sie können diese Technik verwenden, um jegliche Art von Ausrichtung eines oder mehrerer Elemente innerhalb eines anderen vorzunehmen. Im obigen Beispiel können Sie versuchen, die Werte auf beliebige gültige Werte für justify-content und align-items zu ändern.