如何將「框」對齊屏幕中間？

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; 
} 

爲了向後兼容。