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

Question

I'm looking for a style which aligns the white box in this fiddle to the center of the screen.

I thought I could use text-align-middle in an outer div-element. But unfortunately it doesn't work.

I've been trying for hours now and hope you can help me.

Thank you in advance.

Answer 1

Add this to your current 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;*/
}

Older IE versions don't allow such constructs. In that case you have to add:

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

For backwards compatibility.