如何将“框”对齐屏幕中间？

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

为了向后兼容。