[css] block 혹은 inline-block에서 텍스트 가운데 정렬

html 작성중 <div>나 <p>같은 블럭 레벨 엘리먼트를 많이 사용하게 된다.
블럭 레벨의 텍스트 가운데 정렬을 위해

text-align: center;
vertical-align: middle;

을 사용해보면 수평방향 정렬을 작동되지만 수직방향은 작동이 안된다. 이는 vertical-align 속성이 inline or table요소에만 적용가능하기 때문이다.

이때 나름의 편법으로 수직정렬이 가능한 방법은 line-height을 블럭 height와 같게 해주면 수직정렬이 가능하다.

height: 30px;
text-align: center;
line-height: 30px;

이렇게 말이죠! 😃