Ein Element zentrieren
In diesem Rezept erfahren Sie, wie Sie eine Box innerhalb einer anderen zentrieren, indem Sie flexbox und grid verwenden, um Inhalte sowohl horizontal als auch vertikal zu zentrieren.
Anforderungen
Um ein Element horizontal und vertikal in die Mitte einer anderen Box zu platzieren.
Rezept
Klicken Sie auf "Play" in den Codeblöcken unten, um das Beispiel im MDN Playground zu bearbeiten:
<div class="container">
<div class="item">I am centered!</div>
</div>
.item {
border: 2px solid rgb(95 97 110);
border-radius: 0.5em;
padding: 20px;
width: 10em;
}
.container {
border: 2px solid rgb(75 70 74);
border-radius: 0.5em;
font: 1.2em sans-serif;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
Verwendung von flexbox
Um eine Box innerhalb einer anderen zu zentrieren, verwandeln Sie zunächst die Box, in der das Element enthalten ist, in einen flex container, indem Sie seine display-Eigenschaft auf flex setzen. Setzen Sie dann align-items auf center für die vertikale Zentrierung (auf der Block-Achse) und justify-content auf center für die horizontale Zentrierung (auf der Inline-Achse). Und das ist alles, was nötig ist, um eine Box innerhalb einer anderen zu zentrieren!
HTML
<div class="container">
<div class="item">I am centered!</div>
</div>
CSS
div {
border: solid 3px;
padding: 1em;
max-width: 75%;
}
.item {
border: 2px solid rgb(95 97 110);
border-radius: 0.5em;
padding: 20px;
width: 10em;
}
.container {
height: 8em;
border: 2px solid rgb(75 70 74);
border-radius: 0.5em;
font: 1.2em sans-serif;
display: flex;
align-items: center;
justify-content: center;
}
Wir setzen eine Höhe für das Container-Element, um zu demonstrieren, dass das innere Element tatsächlich vertikal innerhalb des Containers zentriert ist.
Ergebnis
Statt align-items: center; auf den Container anzuwenden, können Sie das innere Element auch vertikal zentrieren, indem Sie align-self auf center für das innere Element selbst setzen.
Verwendung von grid
Eine weitere Methode, die Sie verwenden können, um eine Box innerhalb einer anderen zu zentrieren, besteht darin, die umgebende Box zuerst in einen grid container zu verwandeln und dann seine place-items-Eigenschaft auf center zu setzen, um die Elemente auf beiden Achsen, Block- und Inline-Achse, zu zentrieren.
HTML
<div class="container">
<div class="item">I am centered!</div>
</div>
CSS
div {
border: solid 3px;
padding: 1em;
max-width: 75%;
}
.item {
border: 2px solid rgb(95 97 110);
border-radius: 0.5em;
padding: 20px;
width: 10em;
}
.container {
height: 8em;
border: 2px solid rgb(75 70 74);
border-radius: 0.5em;
font: 1.2em sans-serif;
display: grid;
place-items: center;
}
Ergebnis
Anstatt place-items: center; auf den Container anzuwenden, können Sie die gleiche Zentrierung erreichen, indem Sie place-content: center; auf den Container anwenden oder entweder place-self: center oder margin: auto; auf das innere Element selbst anwenden.