웹 개발에서 요소를 화면의 정중앙에 배치하는 것은 의외로 자주 마주치는 과제입니다. 예전에는 position과 음수 마진을 조합한 복잡한 방식을 써야 했지만, 지금은 CSS Flexbox 덕분에 단 몇 줄의 코드로 깔끔하게 해결할 수 있습니다.
Flexbox 중앙 정렬의 기본 원리
Flexbox는 부모 요소(컨테이너)에 display: flex;를 선언하면 활성화됩니다. 이후 두 가지 핵심 속성만 알면 중앙 정렬이 완성됩니다.
- justify-content: center; — 주 축(기본적으로 가로 방향) 기준으로 자식 요소들을 중앙에 배치합니다.
- align-items: center; — 교차 축(기본적으로 세로 방향) 기준으로 자식 요소들을 중앙에 배치합니다.
완전한 코드 예제
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 컨테이너 높이 지정 필수 */
}여기서 주목할 점은 height: 100vh;입니다. Flexbox는 부모 컨테이너의 높이를 기준으로 세로 정렬을 계산하기 때문에, 컨테이너에 명시적인 높이가 없으면 세로 중앙 정렬이 제대로 동작하지 않습니다.
더 간결한 축약형 코드
최신 브라우저에서는 한 줄로 처리할 수 있는 방법도 있습니다.
.container {
display: flex;
place-items: center;
height: 100vh;
}place-items는 align-items와 justify-items를 동시에 설정하는 축약 속성으로, Grid는 물론 Flexbox에서도 지원되어 코드를 훨씬 짧게 만들어 줍니다.
실무에서 자주 하는 실수
- 컨테이너 높이 미지정: 세로 정렬은 부모의 높이가 있어야 의미가 있습니다.
height,min-height또는100vh등을 활용하세요. - 적용 대상 혼동:
justify-content와align-items는 반드시 부모(컨테이너)에 적용해야 합니다. 자식 요소에 넣으면 동작하지 않습니다. - flex-direction 변경 시 축 전환:
flex-direction: column;을 사용하면 주 축과 교차 축이 서로 바뀌므로, 두 속성의 역할도 함께 뒤바뀐다는 점을 유의하세요.
마무리
Flexbox를 활용한 중앙 정렬은 현대 웹 개발의 기본기라고 할 수 있습니다. 위의 몇 줄 코드만 기억해두면 로딩 스피너, 모달 창, 로그인 폼 등 다양한 UI 요소를 손쉽게 화면 정중앙에 배치할 수 있습니다. 아래 영상의 CodePen 예제를 직접 수정해가며 감각을 익혀보세요.
