Blockelemente wie div oder p horizontal in einem umgebenden Block zu zentrieren ist mit CSS einfach: margin 0 auto verteilt den linken und rechten Rand gleichmässig. Leider kann man das selbe Prinzip nicht für die vertikale Zentrierung des eingeschlossenen Blocks verwenden.

Im Beitrag Vertical Centering in CSS zeigt Dušan Janovský eine Methode, die ohne Layouttabellen auskommt: Für Browser mit CSS2-Unterstützung verwendet man die CSS-Anweisungen display:table für das umgebende Blockelelement und display: table-cell;vertical-align: center für das eingeschlossene Element.

Dazu ein passendes Codebeispiel:

<style>
#container {height:400px;display:table}
#cell {display:table-cell;vertical-align: middle;}
</style>
<div id="container">
<div id="cell">
<p>Lorem ipsum</p>
</div>
</div>

Kommentarfunktion für diesen Artikel geschlossen.