HTML DIV 와 같은 박스 요소 중앙에 배치하기

처음 HTML 을 공부하실때 많이 궁금해 하시는 부분일것이 div 와 같은 박스 를 중앙으로 위치 시키는 것입니다.

아래와 같이 붉은 상자처럼 페이지의 중앙으로 위치시키는 방법인대요.

 텍스트의 경우 text-align:center; 로 중앙으로 오지만 div 나 ul li 와 같은 경우 중앙에 위치하기 위해서는 div와 css 의 구조를 맞춰줘야 합니다.

우선 간단하게 예를 들어 보면

-HTML-

        

                나는 중앙 상자
        

-CSS-

#wrapper_element{
   width:100%;
   height:450px;
   border:1px solid gray;
}

#element{
   width:450px;
   height:450px;
   border:1px solid red;
   margin:0 auto 0;
   text-align:center;
}

결과

나는 중앙 상자

위의 코드에서 포인트는 

- wrapper_element 의 가로 100% , 고정된 가로 지정 , margin: 0 auto 0; 입니다.

 설명드리자면 wrapper_element 가 전체 상자로서의 역할을 하고 거기에 element 의 width : 450px; 를 지정함으로서 중앙에 들어갈 고정된 크기의 상자를 만들어 냅니다.

 가장 중요한 포인트는 margin:0 auto 0; 인대요. 양끝의 0 은 상단, 하단 의 margin 을 말하며 auto 는 왼쪽, 오른쪽의 margin을 자동으로 준다는 뜻입니다. margin:0 auto 0; 에서 auto 를 제외한 상 하단의 margin 은 자동으로 조절할수 있지만 auto 로 지정된 좌우의 margin 을 하나라도 조절할 경우 중앙으로 위치하게 할 수 없으니 참고하시기 바랍니다.( ex : margin :10px auto 20px; - 가능 )