Wer sich mit dem Positionieren von HTML Elementen mit Hilfe von CSS beschäftigt, stößt früher oder später auf das Phänomen, dass in Block-Elementen (div, h1, h2, p, etc) zwar horizonal, nicht aber vertikal zentriert werden kann. Die Angabe vertical-align:middle funktioniert nämlich nur in Inline-Elementen; vorzugsweise kommt sie in Tabellenzellen zum Einsatz.

Abhilfe kann man auf verschiedene Weise schaffen.

Update: Man kann dem Problem heutzutage auch mit display:flex zu Leibe rücken. S. diesen Beitrag.

Das Einfachste ist es, dem Element die Eigenschaft line-height zu geben und hier den selben Wert einzutragen, den die Höhe des Elements hat:

#middlediv {
  height:150px;
  line-height:150px;
  padding:0 20px;
  width:200px;
  margin:0 auto;
  background:#ccc;
}

Beispiel 1

Das funktioniert aber nur, wenn der Inhalt einzeilig ist; ansonsten bewirkt die Angabe zur line-height, dass der Zeilenabstand entsprechend groß ist.

Beispiel 2

Bei mehrzeiligem Text muss das Block-Element in eine Art Tabellenzelle umgewandelt werden und zwar mit der Angabe display:table-cell; Dann funktioniert das gewünschte vertical-align:middle;
Das Problem hierbei ist, dass sich das Block-Element dann (teilweise) wie ein Inline-Element verhält, d.h. die verwendete Angabe zum Zentrieren margin:0 auto; funktioniert nicht mehr.

#middlediv {
  height:150px;
  padding:0 20px;
  width:200px;
  margin:0 auto;
  display:table-cell;
  vertical-align:middle;
  background:#ccc;
}

Beispiel 3

Man kann sich behelfen, indem man einen div-Container um das Element herum legt und diesem die Angaben zum Zentrienen mitgibt.

#wrap {
  width:240px;
  margin:0 auto;
}
#middlediv {
  height:150px;
  padding:0 20px;
  margin:0 auto;
  display:table-cell;
  vertical-align:middle;
  background:#ccc;
}

Beispiel 4

So weit so gut. Es kann jedoch vorkommen, dass die Angaben zu Breite und Hintergrundfarbe nicht in dem Element, dessen Inhalt zentriert werden soll, gemacht werden (können), sondern in dem Umschließenden.

#wrap {
  width:240px;
  height:150px;
  margin:0 auto;
  background:#ccc;
}
#middlediv {
  padding:0 20px;
  margin:0 auto;
  display:table-cell;
  vertical-align:middle;
}

In diesem Fall bewirkt das display:table-cell; nichts.
Beispiel 5

Abhilfe schafft eine Angabe für den umschließenden Container und zwar display:table;

#wrap {
  ...
  display:table;
}

Beispiel 6

Das Ganze funktioniert übrigens nicht im Internet Explorer < 8. aber das sollte heutzutage kein Problem mehr sein.