[펌] CSS로 DIV 태그를 상하, 좌우 가운데 정렬하기

 

---

 

 출처: http://inspiredjw.tistory.com/13

 

---

 

CSS를 이용하여 가운데 정렬할 일이 많은데요.

생각보다 쉽지 않습니다.

예를 들어 이렇게 DIV 안에 DIV 한 개가 있다고 가정해봅시다.

 

 

 
HTML
 

?

1 2 3

<div id="container">     <div id="block"> </div> </div>

CSS

?

1 2	#container { width:300px; height:300px; background-color:#191970; } #block { width:50px; height:50px; background-color:#ffd700; }

예제 보기

---

이 상태에서 먼저 Horizontal(가로)로 정렬을 먼저 해볼까요?

<div id="container" align="center"> 이렇게 하면 스타일시트(CSS)가 완전히 분리가 되지 않겠죠?

CSS

?

1 2	#container { width:300px; height:300px; background-color:#191970; } #block { width:50px; height:50px; background-color:#ffd700; margin:0 auto; }

이렇게 "margin 상하는 일단 주지 않고 좌우를 auto로 자동으로 맞춤"해줌으로써

#block div 양 쪽에 자동으로 알맞게 margin이 들어감으로써 가운데 정렬이 되게 됩니다.



예제 보기

 

 

또 다른 방법으로는

CSS 

?

1 2 3 4 5 6 7 8 9 10 11 12

#container {      width:300px;      height:300px;      background-color:#191970;      text-align:center; } #block {      width:50px;      height:50px;      background-color:#ffd700;      display:inline-block; }

이렇게 #block DIV 의 block 요소를 기본값인 block에서 inline-block으로 바꿔주어 inline 요소를 주어 text-align이 가능하게 만들어 가운데 정렬을 하는 방법이 있습니다.

 

예제 보기

---

그럼 이제 부터 진짜 관건인 Veritcal(세로)로 정렬 하는 법을 알아보겠습니다!

#container DIV의 height 값이 변하지 않고 고정된 값이라면 

?

1 2 3 4 5 6 7 8 9 10 11 12 13

#container {     width:300px;     height:300px;     background-color:#191970;     text-align:center; } #block {     width:50px;     height:50px;     background-color:#ffd700;     display:inline-block;     margin:125px 0; }

이렇게 

( #container height - #block height ) / 2 = margin 값

이 공식을 사용해서 #block DIV에 세로 margin 값을 주면 세로로도 정렬이 됩니다.

예제 보기

 

 

하지만 만약

저 파란 #container DIV의 높이 값이 어떤 값일지 알 수 없고 고정적이지 않다면?

물론.. JavaScript나 jQuery를 이용해서 동적으로

#container DIV의 변하는 Height값에 맞춰 #block DIV의 margin 값을

바꿔주는 방법도 있겠지만

CSS로만 할 수 있다면 더 좋겠죠?

그래서 방법이 있습니다!

바로 vertical-align 을 이용하는 것인데요.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

#container {     width:300px;     height:300px;     background-color:#191970;     text-align:center;     vertical-align:middle;     display:table-cell; } #block {     width:50px;     height:50px;     background-color:#ffd700;     display:inline-block; }

예제 보기 

이렇게 #container DIV 를 마치 TABLE 태그 안 TD처럼 하나의 table-cell 처럼 사용하면서 

세로로 정렬하는 법입니다.

이 방법으로 하면 JavaScript나 jQuery 힘을 빌리지 않고도 세로 값이 일정하지 않은 DIV 안에서도

세로 정렬을 할 수 있습니다.