Sie möchten eine Internetseite erstellen, die im Browser mittig zentriert ist? Zu den guten alten Zeiten des HTML, als CSS noch kaum vorhanden war und das Layout einer Seite in aller Regel mit Tabellen festgelegt wurde, gab es die Standardmethode mit dem Quellcode:
<table width = „100%“ height = „100%“ border = „0“ cellspacing = „1“ cellpadding = „0“ align = „center“>
<tr>
<td align = „center“ valign = „middle“ width = „100%“ height = „100%“>
Der zentrierte Inhalt
</td>
</tr>
</table>
Bei dieser Lösung gibt es eine Vertikale und eine horizontale Zentrierung aller Elemente in der Tabelle. Meistens ist es aber gewünscht, nur horizontal zu zentrieren. Eine beliebte Methode dazu war früher auch das <center> – Tag, das inzwischen nicht mehr verwendet werden sollte. Dieses Tag wurde einfach als erstes Element in den Body der Seite gesetzt, und alle darin befindlichen Elemente dadurch horizontal zentriert. Ein Beispiel dazu sieht so aus:
<center>
<table width = „700“ height = „500“ border = „1“ cellspacing = „1“ cellpadding = „0“>
<tr>
<td align = „center“ valign = „middle“ width = „100%“ height = „100%“>
Der zentrierte Inhalt
</td>
</tr>
</table>
</center>
In XHTML wird das Layout mit DIV – Containern und CSS – Formatierungen festgelegt. Da sieht die Lösung zur Zentrierung einer Seite dann so aus, dass man einfach nur ein DIV in der XHTML-Seite einsetzt (im Beispiel mit dem Bezeichner „#maincentered“) und dazu folgende CSS linkt:
#maincentered {
position: absolute;
visibility: visible;
left: 50%;
top: 50%;
width: 700px;
height: 500px;
margin-left: -350px;
margin-top: -250px;
z-index : 1;
}
Damit hat man wohl die sauberste Möglichkeit gewählt, eine Seite zu zentrieren. Wenn es keine besonderen Gründe dafür vorliegen, ist die Variante in XHTML mit CSS die erste Wahl.
