css3 가로세로 정렬

반응형을 많이 만들다 보니 세로 정렬에 대해 궁금해지던차에 편법을 이용한 가로 정렬이 가능함

 

height 사이즈가 정해져 있다면 모를까 정해져 있지 않은 상태에서의 세로정렬은

 

transform 을 이용하여 가능하다

 

예시

 

<div class="test">

테스트

</div>

 

라는 박스를 만들어 주고 css를 아래와 같이 주었을때 세로 정렬이 가능해 진다.

 

<style>

html, body {width:100%; height:100%}

.test {width:90%; margin:0 auto; height:50%; background:#f00; position:relative; top:50%; transform:translateY(-50%);}

</style>

 

위와 같이 한다면 세로 정렬이 된다.

응용방법은 많다. 예를 들어 가로 정렬시에 많이 쓰이는 'margin:0 auto'  대신에 'left:50%; transform:translateX(-50%)' 사용할 수도 있다.

 

가로 세로 동시 정렬을 하고 싶을때는 'top:50%; left:50%; transform:translate(-50%, -50%)' 이런식으로 활용이 가능하다.

 

'transform' 속성을 보면 기울기 회전 크기 등 오브젝트를 변형 가능하게끔 하는 속성들이 많다. 다른건 쓸 일이 거의 없다 보니 위치 속성인 'translate' 속성을 이용하여 가로 세로 정렬을 만들어 봄

 

css3 다보니 안 먹는 브라우저가 있을수도 있다. 크로스 브라우징을 위해서는 '-webkit-, -ms-, -moz-, -o-'등을 사용해야 할 수도 있겠지만서도....... 요즘은 구 버젼을 쓰는 사람이 적어서 걍 무시하고 써도 될듯........