Wie richte ich eine "Box" in der Mitte des Bildschirms aus?

Question

Ich bin auf der Suche nach einem Stil, der die weiße Box in this fiddle auf die Mitte des Bildschirms ausrichtet.

Ich dachte, ich könnte Text-Align-Mitte in einem äußeren div-Element verwenden. Aber leider funktioniert es nicht.

Ich habe schon seit Stunden versucht und hoffe, Sie können mir helfen.

Vielen Dank im Voraus.

Answer 1

Fügen Sie diese auf Ihrem aktuellen CSS:

.abs { 
    width: 100%; 
} 
.box { 
    width: 220px; 
    margin: auto; 
} 

Answer 2

.background1{ 
    margin:auto; 
    background-color:#000000; 
    min-width:100%; 
    min-height:500px; 
} 
.bgcolor { 
    position:relative; 
    width:100%; 
    height:100%; 
    background-color:#000000; 
    opacity:0.5; 
} 
.abs { 
    display:block; 
    margin:auto; 
    width:100%; 
    height:500px; 
} 
.box { 
    margin:auto; 
    position: relative; 
    width:220px; 
    height:80px; 
    background-color:#ffffff; 
    border:1px solid grey; 
} 

Answer 3

.abs{ 
    position: aboslute; 
    width: 100%; 
} 

.box{ 
    /*either use*/ 
    width: 220px; /*or larger for fixed width*/ 
    /*or use*/ 
    max-width: 400px; /*or any other size to give it a flexible auto size*/ 

    margin: auto; /* or margin: 0 auto 0 auto;*/ 
} 

Ältere IE-Versionen erlauben keine solche Konstrukte. In diesem Fall müssen Sie hinzufügen:

.abs{ 
    text-align: center; 
} 
.box{ 
    text-align: left; 
} 

Für Abwärtskompatibilität.