Flexbox로 수직 중앙 정렬 구현하기

배경

모달 컴포넌트의 수직 중앙 정렬을 구현하면서 기존 방식의 한계를 느꼈다. position: absolute에 top: 50%, transform: translateY(-50%)를 사용하는 방식은 코드가 직관적이지 않았고, 높이를 미리 알아야 하는 경우도 많았다.

IE11 점유율이 떨어지면서 Flexbox를 본격적으로 사용할 수 있게 되었다. Can I Use 기준 약 95% 브라우저 지원률을 확보했다.

구현

가장 기본적인 수직/수평 중앙 정렬 패턴이다.

.modal-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 4px;
}

기존 방식 대비 코드가 명확해졌다. align-items: center만으로 수직 중앙 정렬이 해결된다.

주의사항

IE10, IE11에서는 min-height와 함께 사용할 때 버그가 있다. 부모 요소에 명시적인 height 값을 지정해야 정상 작동한다.

/* IE 대응 */
.flex-container {
  display: flex;
  height: 100vh; /* min-height 대신 height 사용 */
}

결과

기존 레거시 레이아웃 코드를 점진적으로 Flexbox로 전환하고 있다. 특히 헤더, 사이드바, 컨텐츠 영역의 3단 레이아웃 구조가 훨씬 간결해졌다. Grid Layout도 검토 중이지만 브라우저 지원률이 아직 낮아 당분간은 Flexbox로 충분할 것 같다.