CSS3 Flexbox로 수평·수직 중앙 정렬 완벽 가이드

CSS3의 Flexbox를 활용하면 요소를 수평 및 수직 방향으로 손쉽게 중앙 정렬할 수 있습니다. 핵심은 컨테이너에 display: flex;를 선언한 뒤, justify-content와 align-items 속성을 조합하는 것입니다.

핵심 속성 이해하기

justify-content: center; — 주 축(기본값은 가로 방향)을 기준으로 자식 요소를 중앙에 배치합니다.
align-items: center; — 교차 축(기본값은 세로 방향)을 기준으로 자식 요소를 중앙에 배치합니다.

두 속성을 함께 사용하면 별도의 계산이나 position 트릭 없이도 완벽한 중앙 정렬이 가능합니다.

예제 코드

다음은 Flexbox로 수평·수직 중앙 정렬을 구현한 전체 코드입니다.

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.h-container {
    display: flex;
    width: 300px;
    height: 300px;
    background-color: lightblue;
    justify-content: center;
    align-items: center;
    border: 2px solid black;
}
.h-1 {
    font-size: 30px;
    width: 150px;
    height: 150px;
    background-color: red;
    color: white;
    border: 2px solid rgb(58, 2, 83);
}
</style>
</head>
<body>
<h2>Flexbox를 활용한 수평·수직 중앙 정렬</h2>
<div class="h-container">
<div class="h-1">Centered Div</div>
</div>
</body>
</html>

코드 설명

.h-container 클래스는 300×300px 크기의 부모 컨테이너로, display: flex;가 적용되어 Flex 컨테이너 역할을 합니다. 여기에 justify-content: center;와 align-items: center;를 지정하여 내부의 빨간색 박스(.h-1)가 화면상 정중앙에 위치하게 됩니다.

실행 결과

위 코드를 실행하면 연한 파란색 배경의 정사각형 영역 한가운데에 빨간색 박스가 수평·수직 모두 중앙에 정렬된 것을 확인할 수 있습니다.

CSS3 Flexbox로 수평·수직 중앙 정렬 완벽 가이드

마무리

Flexbox는 과거의 float나 absolute positioning 방식보다 훨씬 직관적이고 유연하게 레이아웃을 구성할 수 있는 현대적인 CSS 기법입니다. 특히 중앙 정렬은 단 두 줄의 속성만으로 해결되므로, 반응형 웹 디자인에서도 널리 활용됩니다.