[CSS] flexbox 없이 텍스트 세로 가운데 정렬 하기

div 내의 텍스트를 div 세로 가운데 정렬을 시키기 위해
내가 가장 자주 사용하던 방법은 display:flex 를 사용하는 것이다.

div {
  display:flex;
  align-items: center;
}

그러나 프로젝트를 하던 중 생각보다 많은 수의 pdf 변환 라이브러리가 css 2.1 버전까지만 지원한다는 사실을 깨닫고...😱
(flexbox는 css 3 버전부터 지원한다)

텍스트를 부모 요소의 위아래 가운데 정렬을 하는 방법을 찾아보았다.

line-height를 부모 요소의 높이와 똑같게 설정해서 사용하는 방법이 있었지만
이건 텍스트가 두줄 이상으로 길어지는 경우 무용지물이 되어버리므로 pass~

해결

내가 찾은 방법은 vertical-align: middle 을 사용하는 방법이었다

사실 vertical-align: middle 을 시도해본적은 많았으나
생각보다 꽤나 조건이 까다로운 녀석임;;

내가 찾은 방법의 조건은 다음과 같다.

부모 요소 div의 display 속성을 table로 설정하고
그 내부의 텍스트는 span 태그로 감싸준 다음,
span 태그에는 display와 vertical-align 설정을 해주는 것

<!-- html -->
<div>
  <span>텍스트다</span>
</div>

/* css */
div {
  display: table;
  height: 50px; /* 높이 지정 */
}
span {
  display: table-cell;
  vertical-align: middle;
}

끝