Ein HTML-Element per CSS horizontal und vertikal zentrieren

Um ein HTML-Element per CSS innerhalb eines Block-Elementes (oder innerhalb des Body) horizontal und vertikal zu zentrieren bedient man sich eines einfachen kleinen Tricks: der Mittelpunkt des Elements und der des Elternelements müssen übereinander gebracht werden.

Dazu wird zunächst das Element absolut in die Mitte des Eltern-Elementes positioniert. Anschließend wird es über negative Margins jeweils um die Hälfte seiner Breite/Höhe nach links/oben verschoben.

#main {
position: absolute;
top: 50%;
left: 50%;
width: 490px;
height: 490px;
margin: -245px 0 0 -245px;
}

Hier ist ein schönes Tutorial: http://www.thestyleworks.de/tut-art/centerblock.shtml