CSS레이아웃-가운데 정렬하기

와이드 모니터가 보급되면서 웹사이트 대부분이 화면 가운데 배치를 하는데 방법은 두가지가 있다.

첫번째는 auto마진을 이용한 방법이고, 두번째는 포지션과 마진에 음수값을 지정하는 방법이다.

1. auto마진 이용

전체를 감싸는 DIV가 수평 중앙에 오도록 하는 레이아웃 이다.

html	css
<div id="wrap"></div>	#wrap {             width:500px;              margin:0 auto;              background:#9eeff4;             height:20px;}

2. 포시션과 음수 마진값 이용

가로 폭을 지정하고 position 속성값을 relative로 지정한다. left 속성에 50%를 지정하면 왼쪽 끝에서 중간에 오게 된다.

하지만 왼쪽 끝을 중간에 놓으려는게 아니고, 가운데 지점이 페이지 중앙에 와야 한다. 이를 위해서  전체너비를 반으로 나눈 값을 음수값 마진으로 적용하면 가운데 지점이 페이지 중앙에 오게 된다.

html	css
<div id="wrap2"></div>	#wrap2 {      width:500px;       position:relative;      left:50%;       margin-left:-250px;       background:#f39800;      height:20px;}