[CSS] DIV 중앙정렬

소스정리

#center {text-align:center;}

.test_box1 {margin:0 auto; width:600px; height:150px;}

.test_box2 {margin:0 auto; text-align:center; width:600px; height:150px;}

.test_box2 {position:relative; left:50%; margin-left:-300px; width:600px; height:150px;}

<!-- 맨위 노란색 -->

<div id="center">

<div class="text_box1"></div>

</div>

<!-- 중간 초록색 -->

<div class="text_box2"></div>

<!-- 마지막 보라색 -->

<div class="text_box3"></div>

소스설명

이부분은 생각보다 굉장히 간단해서, 크게 설명할 부분은 없다고 보는데요 혹시 모르니, 간단하게 훑는 식으로 설명을 하겠습니다.

◆ 노란색,초록색

넓이가 600px로 고정되었을때, margin:0 (위아래) auto (양옆); 양옆을 auto로 줌으로서, 양옆 마진값을 동일하게 주어서 중앙 정렬을 합니다.

◆ 보라색 (양옆,위아래 동시 사용가능)

1. 양옆 > left,right 중 택1 50%; margin-top:-height/2

left:50%; margin-left:320px; 를 한 이유는, 위치가 왼쪽부터 50%지점에위치했을때 총 넓이가 padding 포함 640px 이니까 중앙에서 넘어간 320px을 빼라는 의미입니다.

만약 width를 300px 로 하셨다면 = left:50%; margin-left:150px; 이런식으로 적용하시면됩니다.

2. 위아래 > top,bottom 중 택1 50%; margin-top:-height/2

해당방법이 좋은점은, 위아래 역시 위와 같은 방식으로 지정이 가능하다는 점입니다.

예를들어, height 300px; 의 div를 중앙 정렬 하려면, 위에 식을 대입하여 top:50%; margin-top:-150px; 를 하면 위아래도 중앙정렬이 가능합니다.

IE 테스트 결과

IE7

IE6보라색

그러니 기왕이면 중앙정렬 하실때 크로싱브라우져를하신다면 맨 마지막것을 사용하시기를 추천합니다.

认识你很高兴 반가워요. BLOG >> blog.naver.com/535bo3ob
Follow
4.7 Star App Store Review!
Cpl.dev***uke
The Communities are great you rarely see anyone get in to an argument :)
king***ing
Love Love LOVE
Download

Select Collections