CSS Tricks: Div Horizontal und Vertikal auf der Seite zentrieren

Auf der Suche nach der Möglichkeit ein Div horizontal und vertical auf der Seite zu zentrieren bin ich auf diese Seite gestossen die einige Möglichkeiten samt Pro und Kontra auflistet: http://blog.themeforest.net/tutorials/vertical-centering-with-css/

Ich hab mich aufgrund der Cross-Browser Anforderung für Methode 3 entschieden. Mit ein paar kleinen Änderungen Dabei baut man vor seinen Hauptcontainer/wrapper ein zusätzliches DIV ein das den Container nach unten verschiebt:

<div id="spacer"></div>
<div id="container">
   Seiteninhalt	
</div>

Mit folgendem CSS erreicht man danach, dass die Seite zentriert wird und falls der Seiteninhalt größer als das Browserfenster ist wird ein Scrollbar eingeblendet.

html, body {
  height:100%;
}
#spacer {
 float:left;
 height:50%;
 width:1px;
 margin-bottom: -350px;
}
#container {
 clear:both;
 position:relative;
 margin:0 auto;
 height:700px;
 width:1366px;
}

Ich hab zusätzlich noch folgenden Doctype benötigt:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

weil mit meinem Standart Doctype „<!DOCTYPE html>“ wollte es nicht so richtig.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.