27.12.2007
Eine Seite vertikal und horizontal zentrieren
1. Herkömmliche, mit Nachteilen behaftete Methode
Voraussetzung ist, dass die Seite (div) eine bestimmte Breite und Höhe hat. Im Beispiel soll sie 700px breit und 500px hoch sein.
Um ein einheitliches Browserverhalten zu gewährleisten sollte der Body folgende Angaben enthalten:
body
{
margin: 0;
padding: 0;
width:100%;
height:100%;
}
Den Container, den es innerhalb des Body zu zentrieren gilt, nennen wir #center.
Folgende Angaben dienen dem ersten Schritt für die Zentrierung:
#center
{
background-color: #E6ECFF;
border:2px solid black;
width: 700px;
height: 500px;
position: absolute;
top: 50%;
left: 50%;
}
Zwischenergebnis:
Die obere linke Ecke des #center ist jetzt genau in der Mitte des Bildschirms. Also 50% von oben und 50% von links positioniert.
Damit jetzt die Zentrierung erfolgt, muss er nach links und nach oben "zurück" geschoben werden. Und zwar genau um den hälftigen Wert seiner Breite und Höhe. Dies erreicht man mit entsprechenden negativen margin-Werten.
Somit fügen wir dem #content noch folgende Angaben hinzu:
#center
{
background-color: red;
border:2px solid black;
width: 700px;
height: 500px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -350px;
margin-top: -250px;
}
Daraus folgt der HTML-Code:
<body>
<div id="center">
<p>
Ich bin ein vertikal und horizontal zentrierter Container.
Meine Höhe und Breite sind fest definiert.
</p>
</div>
</body>
Innerhalb des Divs "#center" können nun noch andere Divs wie z.B. Header, Navi, Content und Footer eingefügt und positioniert werden.
Beachte:
Die Methode des Zentrierens birgt auch mögliche Nachteile in sich:
Ist das Browserfenster kleiner als der zentrierte Div verschwinden Teile des Inhalts durch die negativen margin-Werte und sind für den Besucher nicht sichtbar. Divs, deren Breite die potenziell minimalste Bildschirmbreite überschreiten (was man im Einzelfall nicht wissen kann), sollten deshalb nach dieser Methode nicht zentriert werden.
2. Die sichere Zentriermethode
Die unter 1. genannte Zentriermethode hat bei zu kleinem Bildschirmfenster den Nachteil, dass Inhalte verschwinden können und damit für den Besucher nicht sichtbar sind.
Diesen Nachteil schaltet die "Fricca-Methode" mit einem anderen Ansatz aus. Im Folgenden sollen (mit freundlicher Erlaubnis von Corina Rudel
Zunächst die kompletten CSS-Angaben; sie werden nachfolgend noch erörtert:
* {
margin:0;
padding:0;
}
html, body {
height: 100%;
width: 100%;
}
#distance {
width: 10px;
height: 50%;
margin-bottom: -250px;
float: left;
background-color: #f00; /*nur zu Demozwecken*/
}
#container {
margin: 0 auto;
position: relative;
height: 500px;
width: 700px;
clear: left;
background-color: #ADFF2F;
}
Zunächst werden mit dem Universalselektor * sämtliche Innen- und Außenabstände auf "Null" gesetzt. Damit werden unterschiedliche Browser-Standardwerte eliminiert was einer einheitlichen Seitendarstellung in verschiedenen Browsern dient. Ggf. müssen für einzelne Elemente (z.B. "p" oder "h1-h6") dann wieder selbst-definierte Abstände hinterlegt werden.
Die zweite Angabe für html und body sorgt dafür, dass die Seite so hoch und breit wie das Bildschirmfenster wird.
#distance ist für die Zentrierung zuständig. Für die Breite reicht auch ein Pixel, zur besseren Verdeutlichung wurden jedoch 10px gewählt.
Die Höhe von #distance beträgt 50%, somit ragt dieser Div genau bis zur Bildschirmmitte.
margin-bottom: -250px; entspricht dem hälftigen Wert der #container-Höhe und ist negativ.
Für sich allein genommen hat diese Angabe keine Wirkung. Denn der margin-bottom-Wert bezieht sich nicht auf den unteren Bildschirmrand, sondern auf das nachfolgende Element, in unserem Fall der #container. Der Wert beeinflusst nicht #distance, sondern den Abstand des #container zu #distance. Da dieser negativ ist, verschiebt sich der #container von der Bildschirmmitte (das ist der untere Rand von #distance, welcher 50% Höhe hat) nach oben. Und zwar um genau die Hälfte der Höhe von #container, wodurch dieser vertikal zentriert ist.
Sollte der #container höher sein als 100% der Fensterhöhe, so würde ein Teil unsichtbar wie bei der unter 1. genannten Methode. Um dies zu verhindern, wird #distance ein "float: left;" zugewiesen und durch den #container wieder gecleart.
Da Float-Elemente aus dem Fluss der HTML-Elemente herausgenommen sind, ordnen sie sich direkt nach dem letzten vorausgehenden Block-Element an. Da kein solches (geschlossenes Element) vorhanden ist, ist dies der obere Bildschirmrand.
Die Hintergrundfarbe von #distance dient nur der Veranschaulichung und sollte in der Echtanwendung entfernt werden.
Der #container wird horizontal zentriert wie hier beschrieben.
Seine relative Positionierung bewirkt, dass er im Vordergrund vor #distance angezeigt wird.
Die Höhen- und Breitenwerte können individuell gewählt werden, wobei der margin-bottom-Wert bei #distance entsprechend anzupassen ist.
Die Clear-Angabe bewirkt, dass #container unterhalb von #distance angeordnet und im Zusammenspiel mit #distance hälftig nach oben geschoben wird.
Der HTML-Teil ist recht einfach, wobei der Restinhalt der Seite dann innerhalb #container eingefügt wird:
<div id="distance"></div>
<div id="container">Containerinhalt</div>
Problemfall Internet Explorer
Ihr habt alles richtig gemacht und dennoch wird die Seite im IE nicht zentriert dargestellt?
Dann liegt es mit ziemlicher Sicherheit am fehlenden oder fehlerhaften DOCTYPE. Das ist die Angabe, die an allererster Stelle im Quelltext einer Seite stehen sollte und den Browsern angibt, nach welchen Regeln die Seite gecodet ist und wie sie diesen Code zu interpretieren haben.
Damit auch der IE eine Seite zentriert, benötigt er einen "qualifizierten Doctype" wie z.B. diesen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Fügt das also unbedingt ganz an den Anfang eurer Seite ein. Weitergehende Infos findet ihr hier.