[CSS] DIV 가운데 정렬하기 - 페이지 정가운데 / 혹은 그냥 가운데 정렬

CSS 로 박스(컨텐츠)를 가운데로 정렬하기 #1. 그냥 가운데 정렬하기 #wrap{    width:100%;    height:100%;    background:#000;} #wrap .box{     width:300px;    height:300px;    margin:0 auto;}margin:0 auto; 이 친구를 넣어주면 왠만하면 가운데로 간다. 물론 img 나 text는 "text-align:center" 를 쓰길#2 정가운데 정렬 #wrap{    width:100%;    height:100%;    background:#000;    position:relative;} #wrap .box{     width:300px;    height:300px;    position:absolute;    left:50%;    top:50%;    margin-left:-150px;    margin-top:-150px;}물론 다른 방법도 있다. 그런데 이 방법이 젤 편하고 안까먹게 된다. 원리는 일단 BOX의 position 을 absolute 로 준 다음에 left/top 를 50%로 준다. 그럼 x와 y 값에 따라서 50% 지점부터 box 크기 300px 이 먹게된다. 그러니 정가운데로 오려면 margin 값을 box width 값의 반으로 마이너스 해준다. 그럼 가운데로 간다. 난 가끔 이해가 안되면 그려가면서 하는데 한번 그려보면 이해가 될 것이다.