Ein Element zentrieren

In diesem Rezept erfahren Sie, wie man ein Kästchen innerhalb eines anderen mithilfe von Flexbox und Grid zentriert. Das Zentrieren sowohl horizontal als auch vertikal ist einfach und unkompliziert.

ein Element zentriert in einer größeren Box

Anforderungen

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

Rezept

Klicken Sie auf "Play" in den untenstehenden Code-Blöcken, 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;
}

Verwendung von Flexbox

Um ein Kästchen innerhalb eines anderen Kästchens zu zentrieren, verwandeln Sie zuerst das umgebende Kästchen 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 ein Kästchen in einem 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 legen eine Höhe für den Container fest, um zu demonstrieren, dass das innere Element in der Tat vertikal innerhalb des Containers zentriert ist.

Ergebnis

Anstatt align-items: center; auf dem 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, um ein Kästchen innerhalb eines anderen zu zentrieren, besteht darin, das umgebende Kästchen zunächst in einen Grid-Container zu verwandeln und dann seine place-items-Eigenschaft auf center zu setzen, um seine Elemente sowohl auf der Block- als auch auf der Inline-Achsen 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 setzen oder indem Sie entweder place-self: center oder margin: auto; auf das innere Element selbst anwenden.

Ressourcen auf MDN