Vertikal horizontal zentrieren Sie ein Div-Element mit CSS.

Zuletzt aktualisiert am Sonntag 13. März 2022

CSS Center vertikal.

Zentrieren Sie ein Div vertikal

	<div class="vertikal-horizontal-center-element">
   Vertikales Mittelelement in einer festen Größe div
</div>
	
	.vertikal-horizontal-center-element {
  display: flex;
  /* justify-content wird es horizontal ausrichten */
  justify-content: center;
  /* align-items wird es vertikal ausrichten */
  align-items: center;
  height: 50vh;
}
	

Alter Weg, um ein Element vertikal zu zentrieren

Alte Wege Bestand Darin, display:table zu verwenden und Seine Kind zu display: table-cell und Einstellen Sie es nur vertical-align: middle.

	<div class="tabelleVerwenden">
  <h1>Zentriert</h1>
</div>
	
	.tabelleVerwenden {
  display: table;
  height: 50vh;
  width: 100%;
  text-align: center;
}
.tabelleVerwenden h1 {
  display: table-cell;
  vertical-align: middle;
}
	

Vertikal zentrieren mit Relative-Absolute Position

	<div class="elternteil">
  <p class="kind">Zentriert mit Relative-Absolute Positioning</p>
</div>
	
	.elternteil {
  position: relative;
  height: 50vh;
}

.kind {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  text-align: center;
}
	
	.elternteil {
  position: relative;
  height: 50vh;
}
.kind {
  width: fit-content;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: fit-content;
}
	

Vertikal zentrieren mit grid

	<div class="grid">
  <p>Mit dem Grid zentriert</p>
</div>
<div class="grid-pi">
  <p>Mit dem Grid zentriert PlaceItems</p>
</div>
<div class="grid-margin">
  <div class="grid-margin-kind">Zentriert mit Grid und margin</div>
</div>
	
	.grid {
  display: grid;
  align-items: center;
  justify-content: center;
  height: 50vh;
}
	
	.grid-pi {
  display: grid;
  place-items: center;
  height: 50vh;
}
	
	.grid-margin {
  display: grid;
  height: 50vh;
}

.grid-margin-kind {
  margin: auto;
}