Zentrieren Sie den Inhalt auf der Seite mithilfe von CSS

Question

Ich versuche, eine Lead-Generierungsseite zu erstellen. Ich möchte alle Inhalte auf der Seite in der Mitte zentrieren, wenn sie in einer beliebigen Browsergröße angezeigt werden.

Ich versuchte mit der vertikalen Ausrichtung Mitte. Aber es scheint nicht zu funktionieren.

Welche sind die besten Praktiken, um dies zu tun?

http://play.mink7.com/h/mspre/

Answer 1

Wenn Sie nur zwischen linken und rechten Rand bedeuten Zentrieren Sie ein Element mit einer festen Breite erstellen und margin: auto; auf sie erklären.

Wenn Sie das Element sowohl horizontal als auch vertikal zentrieren möchten, positionieren Sie es horizontal und vertikal auf der Hälfte der Seite und ziehen es dann um die Hälfte der Elementbreite und -höhe zurück.

Zum Beispiel:

.someElement { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 200px; 
    height: 200px; 
    margin: -100px 0 0 -100px; 
} 

Answer 2

Hier gehen Sie:

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Answer 3

Für mich ist der beste Weg, es zu tun ist, einen Container div von Schränkungsweite zu machen. Ich wähle normalerweise ungefähr 900px, da ziemlich alle Anzeigen breiter als dieses jetzt ein Tage sind. Ich zentriere dann div, indem ich margin auto benutze.

#container { width: 900px; 
margin: 0px auto 0px auto; 
} 

Dies wird die div zentrieren. Bob ist Dein Onkel.
Wenn Sie möchten, kann ich Beispiele dafür veröffentlichen.

Mike