Methode für die vertikal zentrierte HTML-Seite im Vollbildmodus?

8

Ich suche nach einer gültigen browserübergreifenden Lösung für eine HTML-Seite, die:

  1. Verbraucht 100% der Bildschirmhöhe ohne Überlauf (d. h. kein Scrollen)
  2. hat einen vertikalen (und horizontalen) Mittelpunkt <div> , der den Hauptinhalt
  3. enthält

Ich weiß, dass eine vertikale Zentrierung möglich ist, wenn der Verpackungsbehälter eine statische Höhe hat. Ist es möglich, diese Höhe auf die Höhe des Browserfensters einzustellen? (Vorzugsweise sollte kein JS verwendet werden.)

    
Yuval Adam 26.01.2011, 08:11
quelle

3 Antworten

19

Hängt davon ab, was Sie mit "cross browser" meinen. Das Folgende funktioniert gut mit allen aktuellen, standardkompatiblen (also nicht IE6):

HTML:

%Vor%

CSS:

%Vor%

Live-Beispiel:

Ссылка

    
RoToRa 26.01.2011, 14:14
quelle
0

Sie könnten so etwas tun. Es scheint auch in IE6 zu funktionieren:

%Vor%     
stoneMonkey77 26.01.2011 14:38
quelle
0

Ist einfach nicht ohne JavaScript möglich, zumindest nicht mit CSS2 oder früher (nicht sicher, ob CSS3 dies ermöglicht, jemand klärt darüber).

Die anderen bereitgestellten Antworten erfordern absolute Breite und Höhe für das Element; Ich habe keine solche Anforderung angenommen. Es gibt keine Möglichkeit, ein fließendes Element vertikal zu zentrieren, was Sie normalerweise möchten, da Sie das Seitenverhältnis des Browserfensters nicht kennen, um Container fester Größe für den Inhalt zuverlässig zu verwenden.

    
Core Xii 26.01.2011 08:33
quelle

Tags und Links