CSS / Tutorial / Flex / 예제
Flex로 자식 요소를 부모의 가운데에 놓으려면 부모에 display: flex, justify-content: center, align-items: center를 지정합니다. 앞의 정렬 속성은 주축, 뒤의 속성은 교차축을 담당합니다. 세로 가운데 정렬을 눈으로 확인하려면 부모에 자식보다 큰 공간이 있어야 하므로, 아래 예제는 고정 높이 대신 min-height를 사용합니다.
가운데 정렬에 필요한 세 가지 설정
.stage {
display: flex;
justify-content: center;
align-items: center;
min-height: 320px;
}display: flex를 선언한 요소가 Flex 컨테이너이고 그 바로 아래 자식이 Flex 아이템입니다. 정렬 설정은 가운데 놓을 카드가 아니라 그 카드를 감싸는 부모에 지정합니다. 카드 안의 제목·문단은 이 선언만으로 별도의 Flex 아이템이 되지 않습니다.
기본 flex-direction: row와 가로 쓰기를 기준으로 justify-content는 가로 방향, align-items는 세로 방향을 정렬합니다. 두 속성을 모두 center로 정하면 카드의 중심과 부모 내용 영역의 중심이 일치합니다. 카드가 차지하는 공간과 같은 크기로 부모가 줄어들어 있으면 정렬할 여유 공간이 없어 변화가 보이지 않습니다.
전체 예제: 내용에 따라 늘어나는 가운데 카드
다음 전체 코드를 flex-center.html로 저장하고 브라우저에서 엽니다. 이미지·외부 라이브러리·JavaScript 없이 실행할 수 있습니다. 연한 배경이 부모이고 흰 카드가 가운데 놓이는 자식입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flex로 카드 가운데 배치</title>
<style>
body { margin: 20px; font: 16px/1.6 "Noto Sans KR", sans-serif; color: #203348; }
* { box-sizing: border-box; }
h1 { font-size: 24px; }
.stage { display: flex; justify-content: center; align-items: center;
min-height: 320px; padding: 24px; border: 1px solid #7795a3;
background: #edf5f7; }
.card { width: min(100%, 280px); min-width: 0; padding: 20px;
border-radius: 12px; background: white; box-shadow: 0 4px 16px #20334818;
overflow-wrap: anywhere; }
.card h2 { margin: 0 0 12px; font-size: 20px; }
.card p { margin: 0; }
</style>
</head>
<body>
<h1>Flex 가운데 배치</h1>
<div class="stage">
<section class="card" aria-labelledby="card-title">
<h2 id="card-title">가운데 놓인 카드</h2>
<p>부모가 두 축의 정렬을 담당합니다. 내용이 길어지면 카드와 바깥 영역도 늘어날 수 있습니다.</p>
</section>
</div>
</body>
</html>카드가 부모보다 작을 때는 위아래와 좌우에 같은 여유 공간이 생깁니다. 가로 너비는 최대 280px이며 화면이 좁으면 부모 안쪽 공간에 맞춰 줄어듭니다. 바깥 영역의 min-height: 320px는 최소 높이이므로 카드 내용과 안쪽 여백을 담는 데 더 큰 높이가 필요하면 영역도 늘어납니다. 카드 안 문장의 text-align은 바꾸지 않았으므로 글자는 왼쪽 정렬을 유지합니다.
box-sizing: border-box는 지정한 너비에 테두리와 안쪽 여백을 포함합니다. width: min(100%, 280px)는 사용할 수 있는 너비와 280px 중 작은 값을 선택합니다. min-width: 0은 Flex 아이템의 자동 최소 너비 때문에 축소가 막히는 경우를 줄이고, overflow-wrap: anywhere는 끊기지 않는 긴 주소 같은 내용도 필요한 곳에서 줄바꿈하게 합니다. 이 설정을 텍스트를 잘라 숨기는 속성과 혼동하지 마세요.
주축 방향을 바꾸어 정렬 원리 확인하기
위 예제의 .stage 규칙에서 justify-content만 flex-start로 바꾸면 카드는 기본 row 방향의 시작 쪽으로 이동하고 세로 가운데 정렬은 유지됩니다. 그 상태에서 flex-direction: column을 추가하면 주축이 세로로 바뀌어 카드는 위쪽으로 이동하고 가로 가운데 정렬은 유지됩니다.
/* 전체 예제의 .stage 규칙에서 비교할 값 */
.stage {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
min-height: 320px;
padding: 24px;
}비교를 마쳤으면 flex-direction을 row로 되돌리고 justify-content를 center로 복원합니다. 두 축을 모두 가운데 정렬하면 row와 column에서 카드 하나의 최종 위치는 같을 수 있지만, 시작·끝 정렬이나 아이템이 여러 개일 때 방향 차이가 분명해집니다. 실제 방향은 direction과 writing-mode의 영향도 받으므로 “justify-content는 언제나 가로 정렬”로 외우지 않는 편이 좋습니다.
여러 카드를 Flex로 묶으면 각 줄은 독립적으로 배치됩니다. 가운데 카드 하나를 놓는 이 예제와 여러 줄을 같은 열 너비로 맞추는 격자 배치는 요구 사항이 다릅니다. Flex의 대표 활용 방식은 MDN Flexbox 활용 예시에서 비교할 수 있습니다.
화면 전체에 배치하거나 내용이 넘칠 때
화면 전체를 기준으로 가운데 놓으려면 먼저 body의 기본 여백을 없애고, 배치할 부모가 화면 높이를 채우게 합니다. 전체 예제의 body와 .stage에 아래 선언을 추가하면 제목까지 포함한 전체 페이지가 아니라 .stage의 카드 영역이 최소 화면 높이를 차지합니다. 위쪽 연습 제목을 그대로 두면 제목 높이만큼 페이지가 더 길어지므로 화면 전체 카드 페이지로 쓸 때는 예제의 바깥 h1도 제거하거나 카드 안의 적절한 제목으로 통합하세요.
body { margin: 0; }
.stage {
min-height: 100vh;
min-height: 100dvh;
}100vh는 기본 대체 값이며 뒤의 100dvh는 동적으로 변하는 화면 높이를 반영합니다. 지원하지 않는 브라우저는 해당 선언을 무시합니다. 동적 높이는 모바일 주소 표시줄 등의 변화에 따라 다시 계산될 수 있으므로 실제 표시를 확인해야 합니다. 머리글·바닥글이 따로 있는 페이지라면 카드 영역에 화면 높이 전체를 다시 배정하지 말고 전체 레이아웃 안에서 남은 공간을 배분하세요.
내용이 긴 경우를 확인하려면 카드의 문단을 여러 개로 늘립니다. 이 예제는 최소 높이만 정했으므로 카드가 커지면 부모도 늘어나고 문서는 세로로 스크롤됩니다. height: 100vh처럼 높이를 고정한 뒤 큰 자식을 가운데 정렬하면 자식의 위쪽이 화면 밖으로 나갈 수 있습니다. overflow: hidden으로 덮어 감추기 전에 고정 높이가 정말 필요한지, 내부 스크롤과 포커스 이동이 가능한지부터 확인하세요.
정렬이 안 되면 개발자 도구에서 부모의 실제 크기, display 계산값, 자식의 margin: auto 유무를 확인합니다. 아이템이 flex-grow로 남는 공간을 전부 채우거나 자동 여백이 공간을 흡수하면 justify-content가 분배할 여유가 없을 수 있습니다. flex의 크기 배분과 자동 최소 너비는 정렬과 별도로 점검하는 것이 문제를 찾기 쉽습니다.
