CSS로 요소를 세로·가로 완벽하게 가운데 정렬하는 방법

CSS에서 요소를 세로 및 가로 방향으로 가운데 정렬하는 것은 웹 개발에서 자주 마주치는 작업입니다. 과거에는 여러 가지 번거로운 기법이 필요했지만, 현재는 Flexbox(플렉스박스)를 사용하면 단 몇 줄의 코드로 손쉽게 해결할 수 있습니다.

핵심 원리: Flexbox 활용하기

가운데 정렬의 핵심은 부모 컨테이너에 다음 세 가지 속성을 적용하는 것입니다.

display: flex; — 해당 요소를 플렉스 컨테이너로 지정합니다.
justify-content: center; — 가로 방향(주축)으로 자식 요소를 중앙에 배치합니다.
align-items: center; — 세로 방향(교차축)으로 자식 요소를 중앙에 배치합니다.

예제 코드

아래 예제는 Flexbox를 사용해 텍스트를 컨테이너의 정중앙에 배치하는 전체 코드입니다.

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .centered {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 200px;
        border: 3px solid rgb(0, 70, 128);
    }
</style>
</head>
<body>
<h1>Centering Example</h1>
<div class="centered">
<h2>This text is centered vertically and horizontally both</h2>
</div>
</body>
</html>

실행 결과

위 코드를 실행하면 파란색 테두리가 있는 200px 높이의 박스 안에서 텍스트가 세로와 가로 모두 정중앙에 위치한 것을 확인할 수 있습니다.

추가 팁

컨테이너가 화면 전체를 차지하도록 하려면 height: 200px; 대신 height: 100vh;를 사용하면 됩니다. 또한 최신 브라우저에서는 display: grid;와 place-items: center; 조합으로도 동일한 결과를 얻을 수 있으니 상황에 맞게 선택하시기 바랍니다.