CSS에서 플렉스(Flex) 컨테이너 내부의 항목들을 세로 방향 기준으로 가운데 정렬하려면 align-items 속성에 center 값을 사용하면 됩니다.
align-items: center 속성 이해하기
플렉스 컨테이너에 display: flex가 적용되어 있을 때, align-items 속성은 교차축(cross axis)을 따라 자식 항목들이 배치되는 위치를 결정합니다. 값을 center로 지정하면 모든 플렉스 항목이 컨테이너의 수직 중앙에 정렬됩니다.
예제 코드
아래 코드를 실행하면 주황색 배경의 컨테이너 안에서 흰색 박스들이 세로 중앙에 정렬되는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
background-color: orange;
align-items: center;
height: 150px;
width: 600px;
}
.mycontainer > div {
background-color: white;
text-align: center;
line-height: 40px;
font-size: 25px;
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로 플렉스 컨테이너를 만들고,align-items: center를 적용해 자식 요소들을 세로 중앙에 배치합니다. - .mycontainer > div: 컨테이너 안의 각 항목(Q1~Q4)에 흰색 배경, 텍스트 가운데 정렬 등의 스타일을 지정합니다.
참고로 가로 방향까지 완벽하게 중앙 정렬하고 싶다면 justify-content: center 속성을 함께 추가하면 됩니다.