CSS align-items: center 값으로 플렉스 아이템 중앙 정렬하기

플렉스 박스(Flexbox) 레이아웃에서 align-items 속성에 center 값을 지정하면 플렉스 아이템들을 교차축(cross-axis) 방향 기준으로 중앙에 정렬할 수 있습니다.

여기서 잠깐! 축 개념을 짚고 넘어가면 이해가 쉽습니다. 가로 방향의 주축(main-axis) 정렬은 justify-content로 제어하고, 세로 방향의 교차축(cross-axis) 정렬은 align-items로 제어합니다. 즉, align-items: center는 아이템을 컨테이너의 수직 중앙에 배치하는 역할을 합니다.

아래 예제 코드를 실행해 보면, 150px 높이의 오렌지색 컨테이너 안에서 흰색 아이템들이 수직 중앙에 배치되는 것을 확인할 수 있습니다.

예제

<!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>

핵심 포인트 정리

display: flex — 컨테이너를 플렉스 박스로 설정하여 자식 요소에 플렉스 레이아웃을 적용합니다.
align-items: center — 자식 요소들을 교차축(수직) 기준으로 중앙 정렬합니다.
height: 150px — 컨테이너에 고정 높이를 부여해야 중앙 정렬 효과를 눈으로 확인할 수 있습니다.

참고로 align-items에는 flex-start(시작점 정렬), flex-end(끝점 정렬), stretch(기본값, 늘리기), baseline(텍스트 기준선 정렬) 등 다양한 값을 사용할 수 있으니 상황에 맞게 활용해 보세요.