CSS - css 쉽게 가운데로 수직 정렬하기

CSS: 

쉽게 가운데로 수직 정렬하기

| 시작하기에 앞서

종종, 요소들을 가운데로 수직정렬해야 할때가 있다. 그때 사용할수 있는 css tip이 있다.

| 정렬하는법

가운데 수직 정렬을 하려면 아래와 같이해주면 깔끔하게 요소들이 수직 정렬된다.

display: inline-block;

vertical-align: middle;

height: 100%;

https://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-a-div

• 위의 링크를 참고해보면, 위와 같이 수직정렬하는것이 크로스 브라우징 이슈도 해결하고 best practice라고 나와있다.
• 자주 애용해도 좋을 것 같다!

> 예제

• http://jsfiddle.net/kizu/4RPFa/4570/

| 활용하는 방법

위의 css코드를 mixin을 활용해 변수로 선언해 놓고 필요할때마다 include 해서 쓰면 유용할 듯하다.