Seite zentrieren

Problem Hier lernst du, wie man eine Webseite zentriert, also mittig darstellt. Das kann sinnvoll sein, wenn die Seite nicht über die gesamte Breite gehen soll. Meistens ist eine horizontale Zentrierung völlig ausreichend. In einigen Fällen bietet es sich jedoch an, auch vertikal zu zentrieren. Hier lernst du also die verschiedenen Möglichkeiten kennen.

Inhalt horizontal zentrieren

scnelle Lösung Am einfachsten ist es, Inhalte einfach horizontal zu zentrieren. Diese Seite wird z.B. auch horizontal zentriert (bei Normalbreite, höherer Auflösung und Verwendung eines alternativen Browsers). Hierbei muss man noch unterscheiden, zwischen Block-Zentrierung und Text-Zentrierung. Text-Zentrierung wird auf dieser Seite z.B. für die Überschrift verwendet und durch Blockzentrierung wird die Seite zentriert. Dahinter stecken verschiedene Techniken, die du im folgenden Beispiel kennen lernst.

Beispiel 1

Zusätzliche vertikale Zentrierung (herkömmlich)

Der wohl einfachste, aber auch quellcode-lastigste Weg, um Inhalte vertikal zu zentrieren, besteht darin, eine große Layout-Tabelle zu verwenden. Dabei gibt es wiederum 2 verschiedene Möglichkeiten. Die 1. ist die Verwendung von HTML-Attributen wie valign, align usw.:

Beispiel 2

Natürlich kann man die Tabellen-Zentrierung auch mit CSS umsetzen. Dann kann die Seite auch im standardkonformen Modus angezeigt werden. Wichtig ist hier, dass du berücksichtigst, dass 100% immer vom übergeordneten Element ausgeht. deshalb sollte man auch <html> und <body> eine Höhe von 100% zuweisen.

Beispiel 3

Zentrierung durch reines CSS!

Es gibt aber auch noch 2 weitere Möglichkeiten, für die du kein zusätzliches HTML benötigst. Beide haben Vor- und Nachteile:

Absolute Positionierung % und negative Margins

Eins vorweg: die hier vorgestellte Lösung funktioniert nur, wenn der Inhalt eine feste Breite/Höhe hat. Außerdem rutscht der Inhalt bei zu kleinen Fenstern links aus dem Viewport. Auch scrollen kann man dorthin nicht mehr. Der Vorteil ist, dass diese Technik auch im IE funktioniert. Wie's geht, liest du im:

Beispiel 4

Zentrierung durch CSS-Tabellen

die beste Lösung Ich hoffe die Überschrift war einigermaßen verständlich. Ich meine damit die Möglichkeit, die normalen HTML-Elemente, also <html> und <body> in eine Tabelle zu verwandeln. Zu beachten gibt es hier, dass eine Tabellenzelle nur funktioniert, wenn sie sich in einer Tabelle befindet. Somit bilden <html> und <body> die ideale Vorraussetzung für eine Zentrierung ohne zusätzliches Markup. Um eine Tabellenzelle zu erzeugen, benötigst du lediglich die beiden display-Eigenschaften für Tabellen(-zellen). Also bekommt <html> ein display:table verpasst, während dem <body> ein display:table-cell zugewiesen wird.
Um den gewünschten Effekt zu erzielen, streckt man die Tabelle jetzt noch auf die gesamte Größe des Browserfensters (auch in der Breite) und zentriert den Inhalt mit vertical-align:middle. Zu beachten ist, dass Text-align:center auch hier keine Wirkung zeigt und man den Inhalt mit margin:auto zentrieren muss.

Beispiel 5

Beachte:

Achtung Wie du wahrscheinlich schon bemerkt hast, ist es sehr einfach, eine Seite horizontal zu zentrieren. Vertikal dagegen, gibt es durchaus ein paar Hürden. Während die absolute Zentrierung von der Auflösung abhängig macht, benötigt man für die CSS-Tabellen-Zentrierung einen gescheiten Browser (Firefox, Opera etc.). Man sollte sich hier auch überlegen, wie wichtig die vertikale Zentrierung ist. Soll es eher ein Zusatzfeature sein, oder bist du zwingend auf die Zentrierung angewiesen. i.d.R. trifft ersteres zu und deshalb empfehle ich die Verwendung der CSS-Tabellen. Vielleicht sollte man auch einfach davon ausgehen, dass ein IE6-Nutzer nicht das gleiche, wie ein Firefox- Nutzer erwarten kann und die Seite ja auch für IE-Nutzer zugänglich bleibt.