마치영화처럼 :: Position 속성을 이용한 센터 정렬

웹표준/CSS2012/01/25 13:00

Position 속성을 이용한 센터 정렬

static : 텍스트나 주변 박스에 따라서 움직이는 보통의 박스. 기본값
relative : 처음 박스가 화면에 나오는 위치에서 지정된 오프셋(offset)만큼 위치가 변경됨. 화면에서 공간을 차지함.
absolute : 상위 엘리먼트의 좌측상단을 기준점으로 하여 지정된 오프셋 만큼 위치가 변경됨.지정.
화면에서 공간을 차지 하지 않음.보통 레이어라고 말하는 것은 이 절대위치 속성을 이용한 박스를 말함.
fixed :브라우저 화면을 기준으로 스크롤에 따라 움직이지 않는 위치를 지정. 인터넷 익스플로러에서는 지원되지 않음.

position: absolute; 속성을 이용한 센터 정렬방법 .

position: absolute;
top: 50%; /* 화면의 중앙에 위치 */
left: 50%; /* 화면의 중앙에 위치 */
margin: -100px 0 0 -100px; /* 높이의 절반과 너비의 절반 만큼 margin 을 이용하여 조절 해 줍니다. */

화면의 중앙에 블록을 위치 시키기 위해서는 약간의 제약사항이 있다. 일단, 중앙에 위치하게 되는 block의 크기가 유동적이면 안된다. 그리고 브라우져 화면의 크기가 block의 크기보다 작아지게 되면 일부 영역이 화면 밖으로 넘어가 되어서 보이지 않는 부분도 생기게 된다. 화면의 중앙에 정렬하겠다는 것은 사용자 환경을 고려하지 못한 포지셔닝이기 때문에 특별히 스펙에서 정의하지 않은 것으로 생각 된다. 좀 불편하기는 하다.

출저 : http://postmaster.hyeonseok.com/pmwiki/index.php/Css/Position