「ボックス」を画面の中央に揃えるにはどうすればよいですか？

Question

this fiddleの白いボックスを画面の中央に揃えるスタイルを探しています。

私は外側のdiv要素でtext-align-middleを使用できると考えました。 しかし、残念ながらそれは動作しません。

私は今何時間も努力しており、助けてくれると願っています。

ありがとうございます。

Answer 1

あなたの現在の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;*/ 
} 

古いIEのバージョンでは、このような構築物を許可していません。その場合は、次のものを追加する必要があります。

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

下位互換性のために、次のものを追加する必要があります。