So richten Sie Text in einem Div vertikal aus

Bei der Arbeit mit einem Div ist es manchmal notwendig, sicherzustellen, dass der darin enthaltene Text ausgerichtet ist vertikal in der Mitte. Dies kann durch verschiedene Methoden erreicht werden.

Verwenden der Zeilenhöhe

Wenn das Div eine feste Höhe hat, z. B. 50 Pixel, können Sie einfach die Zeilenhöhe verwenden CSS-Eigenschaft.

#abc {
  height: 50px;
  line-height: 50px;
}

Dadurch wird der Text vertikal innerhalb des div zentriert.

Anzeigeeigenschaften verwenden

Bei mehrzeiligem Text können Sie ihn in eine umbrechen Span-Element und Anzeigeeigenschaften anwenden und vertikal ausrichten.

#abc {
  display: table;
  width: 100%;
}

#abc span {
  display: table-cell;
  vertical-align: middle;
}

Verwenden der Transformationseigenschaft

Eine andere Methode beinhaltet die Verwendung der Transformationseigenschaft mit der Funktion TranslateY(). Dies ist besonders nützlich für ältere Browser, die keine Anzeigeeigenschaften unterstützen.

#abc {
  position: relative;
}

#abc p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}