Ein Element zentrieren

In diesem Rezept erfahren Sie, wie Sie eine Box mithilfe von Flexbox und Grid sowohl horizontal als auch vertikal in einer anderen zentrieren können.

ein Element, das innerhalb einer größeren Box zentriert ist

Anforderungen

Ein Element horizontal und vertikal in der Mitte einer anderen Box positionieren.

Rezept

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

html
<div class="container">
  <div class="item">I am centered!</div>
</div>
css
.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;
}

Flexbox verwenden

Um eine Box in einer anderen Box zu zentrieren, verwandeln Sie zuerst die umgebende Box in einen Flex-Container, indem Sie ihre display-Eigenschaft auf flex setzen. Dann setzen Sie align-items auf center für vertikales Zentrieren (auf der Block-Achse) und justify-content auf center für horizontales Zentrieren (auf der Inline-Achse). Das ist alles, was benötigt wird, um eine Box innerhalb einer anderen zu zentrieren!

HTML

html
<div class="container">
  <div class="item">I am centered!</div>
</div>

CSS

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 den Container, um zu demonstrieren, dass das innere Element tatsächlich vertikal innerhalb des Containers zentriert ist.

Ergebnis

Anstatt 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 einstellen.

Grid verwenden

Eine weitere Methode, mit der Sie eine Box innerhalb einer anderen zentrieren können, besteht darin, die umgebende Box zuerst in einen Grid-Container zu verwandeln und dann ihre place-items-Eigenschaft auf center zu setzen, um ihre Elemente sowohl auf der Block- als auch auf der Inline-Achse zentriert auszurichten.

HTML

html
<div class="container">
  <div class="item">I am centered!</div>
</div>

CSS

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 oder entweder place-self: center oder margin: auto; auf das innere Element selbst anwenden.

Ressourcen auf MDN