CSS Flexbox에서 플렉스 항목(flex items)을 컨테이너의 가로 방향 중앙에 정렬하려면 justify-content 속성에 center 값을 사용하면 됩니다.
justify-content는 주축(main axis)을 따라 플렉스 항목들을 배치하는 방식을 결정하는 속성으로, center 값을 지정하면 모든 항목이 컨테이너의 중앙에 모여 정렬됩니다.
예제 코드
아래 예제를 실행하면 빨간색 배경의 컨테이너 안에서 노란색 박스들이 화면 중앙에 정렬되는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
background-color: red;
justify-content: center;
}
.mycontainer > div {
background-color: #F1C40F;
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), 여백(margin), 글자 크기 등 스타일을 지정합니다.
justify-content의 다른 값들
중앙 정렬 외에도 justify-content 속성은 다양한 값을 지원합니다.
- flex-start: 항목들을 주축의 시작점에 정렬 (기본값)
- flex-end: 항목들을 주축의 끝점에 정렬
- space-between: 첫 번째와 마지막 항목을 양 끝에 두고 나머지를 균등하게 배치
- space-around: 각 항목 주위에 동일한 간격을 두고 배치
- space-evenly: 항목 사이와 양 끝의 간격을 모두 동일하게 배치
세로 방향 중앙 정렬이 필요하다면 align-items: center; 속성을 함께 사용하면 됩니다.