Ein Element zentrieren

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

ein Element zentriert in einem größeren Kasten

Anforderungen

Um ein Element horizontal und vertikal in das Zentrum eines anderen Kästchens zu platzieren.

Rezept

Dieses Beispiel herunterladen

Verwendung von Flexbox

Um ein Kästchen innerhalb eines anderen Kästchens zu zentrieren, verwandeln Sie zuerst das enthaltende Kästchen in einen Flex-Container, indem Sie seine display-Eigenschaft auf flex setzen. Setzen Sie dann 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). Und das ist alles, was nötig ist, um ein Kästchen innerhalb eines 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%;
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 8em;
}

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 auf das innere Element selbst setzen.

Verwendung von Grid

Eine weitere Methode, die Sie verwenden können, um ein Kästchen innerhalb eines anderen zu zentrieren, besteht darin, zuerst das enthaltende Kästchen zu einem Grid-Container zu machen und dann dessen place-items-Eigenschaft auf center zu setzen, um seine Elemente sowohl auf der Block- als auch auf der Inline-Achse 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%;
}
.container {
  display: grid;
  place-items: center;
  height: 8em;
}

Ergebnis

Anstatt place-items: center; auf den Container anzuwenden, können Sie dasselbe Zentrieren auch erreichen, indem Sie place-content: center; auf den Container anwenden oder entweder place-self: center oder margin: auto; auf das innere Element selbst anwenden.