In diesem Rezept erfahren Sie, wie Sie eine Box innerhalb einer anderen Box zentrieren können, indem SieFlexbox undGrid verwenden, um den Inhalt sowohl horizontal als auch vertikal zu zentrieren.

Anforderungen

Ein Element horizontal und vertikal in die Mitte einer anderen Box platzieren.

Rezept

Klicken Sie auf "Play" in den Codeblöcken unten, um das Beispiel im MDN Playground zu bearbeiten:

<div>  <div>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 Box zu zentrieren, verwandeln Sie zuerst die umgebende Box in einFlex-Container, indem Sie diedisplay-Eigenschaft aufflex setzen. Setzen Sie dannalign-items aufcenter für vertikale Zentrierung (auf der Blockachse) undjustify-content aufcenter für horizontale Zentrierung (auf der Inline-Achse). Und das ist alles, was es braucht, um eine Box innerhalb einer anderen zu zentrieren!

HTML

<div>  <div>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 haben die Höhe für den Container festgelegt, um zu demonstrieren, dass das innere Element tatsächlich vertikal innerhalb des Containers zentriert ist.

Ergebnis

Anstelle vonalign-items: center; auf den Container anzuwenden, können Sie das innere Element auch vertikal zentrieren, indem Siealign-self aufcenter für das innere Element selbst setzen.

Verwendung von Grid

Eine weitere Methode, um eine Box innerhalb einer anderen zu zentrieren, ist, die umgebende Box zuerst zu einemGrid-Container zu machen und dann ihreplace-items-Eigenschaft aufcenter zu setzen, um seine Elemente sowohl auf der Block- als auch auf der Inline-Achse zu zentrieren.

HTML

<div>  <div>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

Anstelle vonplace-items: center; auf den Container anzuwenden, können Sie die gleiche Zentrierung auch erreichen, indem Sieplace-content: center; auf den Container anwenden oder indem Sie entwederplace-self: center odermargin: auto; auf das innere Element selbst anwenden.

Ressourcen auf MDN

• Box-Ausrichtung in Flexbox
• CSS-Box-Ausrichtungsleitfaden