[CSS] 가로세로 가운데 정렬

<div style="position:absolute;left:50%;top:50%;margin-left:-500px;margin-top:-250px;">
<img src="./logo.jpg" width="1000" height="500">
</div>

가로가 1000px 세로가 500px 인 이미지가 있다.

left:50%; 으로 가로 가운데 지점을 잡는다.
top:50%; 으로 세로 가운데 지점을 잡는다.

이렇게 해서 정 중앙이 잡혔다.

이미지를 가운데 정렬로 하기 위해서는 이미지의 절반 크기 만큼 빼줘야 한다.

margin-left:-500px; 이미지 가로가 1000px 이므로 절반인 -500px 을 넣어준다.
margin-top:-250px; 이미지 가로가 500px 이므로 절반인 -250px 을 넣어준다.

이 밖에 정렬하는 방법으로 magin 값에 auto 를 넣어주는 방법도 있지만 이 경우 익스플로어나 낮은 버전에서는 작동되지 않는 문제가 있으므로 권장되는 방법은 아니다.

이미지나 블럭으로 지정된 요소가 아니라서 가로세로 크기를 모를경우 가로정렬은 text-align:center; 으로 해주면 되지만 세로정렬은 아마 현재로서는 깔끔한 방법이 없을것 같다. 그러므로 가로세로 가운데 정렬을 하기 위해서는 요소의 가로세로 사이즈를 꼭 지정하는 작업이 필요하다.

좀더 정보를 얻고 싶은분은 아래의 블로그를 참고하시기 바랍니다.
http://webdir.tistory.com/31