Ein Element zentrieren

In diesem Rezept sehen Sie, wie Sie eine Box in einer anderen mittels Flexbox und Grid zentrieren, sowohl horizontal als auch vertikal.

ein zentriertes Element 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 folgenden 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 eine Box innerhalb einer anderen Box zu zentrieren, machen Sie zuerst die umgebende Box zu einem Flex-Container, indem Sie ihre display-Eigenschaft auf flex setzen. Dann setzen Sie align-items auf center, um die vertikale Zentrierung (auf der Block-Achse) zu erreichen, und justify-content auf center, um die horizontale Zentrierung (auf der Inline-Achse) zu erreichen. Und das ist alles, was nötig ist, 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

Anstelle von align-items: center; auf dem Container, können Sie auch das innere Element vertikal zentrieren, indem Sie align-self auf center beim inneren Element selbst einstellen.

Verwendung von Grid

Eine andere Methode, die Sie verwenden können, um eine Box innerhalb einer anderen zu zentrieren, ist, die umgebende Box zuerst zu einem Grid-Container zu machen, und dann die 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

Statt place-items: center; auf dem Container zu verwenden, können Sie dieselbe 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.

Ressourcen auf MDN