CSS Flexbox 레이아웃에서 justify-content 속성에 center 값을 지정하면, 컨테이너 내부의 플렉스 아이템(flex-items)들이 주축(main axis)을 기준으로 가운데 정렬됩니다.
justify-content: center의 동작 방식
플렉스 컨테이너에 display: flex;가 적용된 상태에서 justify-content: center;를 추가하면, 아이템들이 남은 공간을 양쪽으로 균등하게 나누어 가지면서 중앙에 배치됩니다. 이는 수평 정렬을 담당하는 대표적인 속성 조합으로, 네비게이션 바, 버튼 그룹, 카드 레이아웃 등 다양한 UI 요소를 중앙에 배치할 때 자주 활용됩니다.
예제 코드
아래 코드를 실행하면 빨간색 배경의 플렉스 컨테이너 안에서 주황색 아이템 4개가 화면 중앙에 정렬되는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
background-color: red;
justify-content: center;
}
.mycontainer > div {
background-color: orange;
text-align: center;
line-height: 60px;
font-size: 30px;
width: 100px;
margin: 5px;
}
</style>
</head>
<body>
<h1>Quiz</h1>
<div class = "mycontainer">
<div>Q1</div>
<div>Q2</div>
<div>Q3</div>
<div>Q4</div>
</div>
</body>
</html>코드 설명
- .mycontainer:
display: flex로 플렉스 컨테이너를 선언하고,justify-content: center로 자식 요소들을 중앙 정렬합니다. - .mycontainer > div: 각 아이템에 배경색, 너비(100px), 여백(5px) 등을 지정해 시각적으로 구분되도록 합니다.
함께 알아두면 좋은 값들
justify-content 속성에는 center 외에도 다양한 값을 사용할 수 있습니다.
- flex-start: 아이템들을 주축 시작점에 정렬 (기본값)
- flex-end: 아이템들을 주축 끝점에 정렬
- space-between: 첫 번째와 마지막 아이템을 양 끝에 두고 나머지를 균등하게 배치
- space-around: 각 아이템 주위에 균등한 여백을 두고 배치
- space-evenly: 모든 간격을 완전히 동일하게 배치
플렉스 아이템을 세로 방향으로 중앙 정렬하고 싶다면, 같은 컨테이너에 align-items: center;를 함께 사용하면 됩니다.