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

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

생각보다 쉽지 않습니다.

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

 
HTML
 

<div id="container">
    <div id="block">&nbsp;</div>
</div>

CSS

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

예제 보기

---

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

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

CSS

#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 

#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 값이 변하지 않고 고정된 값이라면 

#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 을 이용하는 것인데요.

#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 안에서도

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