"상자"를 화면 중간에 정렬하려면 어떻게합니까?

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

하위 호환성을 위해 다음을 추가해야합니다.