Flexbox를 활용한 텍스트 수직 정렬
공식 CSS 명세에 따르면, 블록 요소 내부의 텍스트를 수직으로 가운데 정렬하려면 해당 요소를 플렉스 컨테이너(flex container)로 선언하고, 교차축(cross axis)을 따라 텍스트를 정렬하기 위해 align-items 속성을 사용해야 합니다.
가장 기본적인 방법은 다음과 같습니다.
display: flex; align-items: center;
또한 구형 Firefox 브라우저와의 호환성을 위해 다음과 같은 방식도 사용할 수 있습니다.
display: -moz-box; -moz-box-align: center;
Flexbox 적용 예시
아래 이미지는 Flexbox를 사용하여 블록 요소 안의 텍스트를 수직 중앙에 정렬한 결과를 보여줍니다.
이처럼 display: flex와 align-items: center 두 줄만 추가하면 별도의 패딩이나 절대 위치 지정 없이도 텍스트를 손쉽게 수직 중앙 정렬할 수 있어, 최신 웹 개발에서 가장 널리 권장되는 방식입니다.