Hoe centreer ik tekst verticaal met CSS?

Je kunt deze basisaanpak proberen:

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}

<div>
  Hello World!
</div>

Het werkt echter alleen voor een enkele regel tekst, omdat we de regel's hoogte op dezelfde hoogte zetten als het bevattende box element.

Een meer veelzijdige aanpak

Dit is een andere manier om tekst verticaal uit te lijnen. Deze oplossing werkt voor een enkele regel en meerdere regels tekst, maar het vereist nog steeds een container met vaste hoogte:

div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>

De CSS maakt gewoon de <div> groot, centreert de <span> verticaal door de <div>'s line-height gelijk te zetten aan zijn hoogte, en maakt van de <span> een inline-block met vertical-align: middle. Dan stelt het de line-height weer in op normaal voor de <span>, zodat de inhoud natuurlijk binnen het blok zal vloeien.

Simulatie van tabel weergave

En hier is een andere optie, die misschien niet werkt op oudere browsers die display: table en display: table-cell niet ondersteunen (in principe alleen Internet Explorer 7). Met CSS simuleren we het gedrag van een tabel (omdat tabellen verticale uitlijning ondersteunen), en de HTML is hetzelfde als het tweede voorbeeld:

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

Absolute positionering gebruiken

Deze techniek gebruikt een absoluut gepositioneerd element waarbij top, bottom, left en right op 0 worden gezet. Het wordt in meer detail beschreven in een artikel in Smashing Magazine, Absolute Horizontal And Vertical Centering In CSS.

U kunt dit gemakkelijk doen door het volgende stukje CSS code toe te voegen:

display: table-cell;
vertical-align: middle;

Dat betekent dat uw CSS er uiteindelijk uitziet als:

#box {
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
  display: table-cell;
  vertical-align: middle;
}

<div id="box">
  Some text
</div>

Voor een enkele regel tekst (of een enkel karakter) kunt u deze techniek gebruiken:

Het kan gebruikt worden als #box een niet-vaste, relatieve hoogte in % heeft.

<div id="box"></div>

#box::before {
    display: block;
    content: "";
    height: 50%;
}

#box::after {
    vertical-align: top;
    line-height: 0;
    content: "TextContent";
}

Zie een live demo op JsBin (eenvoudiger om CSS te bewerken) of [JsFiddle][2] (eenvoudiger om de hoogte van het resultaatframe te veranderen).

Als je innerlijke tekst in HTML wilt plaatsen, en niet in CSS, dan moet je tekst-inhoud in een extra inline element wikkelen en #box::after aanpassen zodat het overeenkomt. (En, natuurlijk, content: eigenschap moet worden verwijderd).

Bijvoorbeeld, <div id="box"><span>TextContent</span></div>. In dit geval moet #box::after worden vervangen door #box span.

Voor Internet Explorer 8 ondersteuning moet u :: vervangen door :.