Wie kann ich in HTML einen div in einem div vertikal zentrieren?

2 Antworten

Winfimet
30.05.2020, 14:45

HTML:

<div class="div-1">
  <div class="div-2"></div>
</div>

CSS:

.div-1{
  position: relative;
  width: 300px;
  height: 300px;
  background: #333;
}
.div-2{
  position: absolute;
  width: 100px;
  height: 100px;
  background: #000;
  top: 50%;
  transform: translateY(-50%);
}

Wenn du es genau mittig Zentrieren möchtest, dann füge noch hinzu im div-2

und ändere translateY zu 

translate(-50%,-50%);
left: 50%;

Das ist so die Grundkenntnis im Zentrieren. Aber auch kannst du den Lösungsvorschlag von Steffile nehmen, indem du mit Flex arbeitest.
Woher ich das weiß:eigene Erfahrung
Steffile
30.05.2020, 13:24 
<div class="div-1">
  <div class="div-2">
  </div>
</div>

CSS:

.div-1 {
  display: flex;
  align-items: center;
}