[CSS] display: flex를 활용한 수직 정렬

CSS를 적용하다 보면 박스 안에 해당 컨텐츠를 수직(세로) 정렬해야 될 때가 많다.
위의 사진을 봐보자.

박스 안에 파란색 text가 수직 정렬이 되어 있다.
퍼블리싱을 할 때마다 수직 정렬을 꽤나 많이 해야 되는데 그 때마다 정확하게 기억이 안나서 이번 기회에 정리해보려고 한다.

아래 사진은 현재 팀 프로젝트에서 개발 중인 작업이다.

현재 카테고리 리스트를 보면 text의 세로 위치가 중앙에 있지 않다.
이것을 수직 정렬하기 위해서 display: flex를 사용해볼 것이다.

먼저, 카테고리 리스트의 부모 요소인 div 박스에다 display: flex를 적용해야 된다.
그리고 수직 정렬을 하기 위해서 align-items: center을 적용해주면 된다.

카테고리 HTML 구조 (emotion 사용)

    <div css={category}>
      <ul>
        <li>전체</li>
        <li>카테고리</li>
        <li>카테고리</li>
        <li>카테고리</li>
      </ul>
    </div>

카테고리 CSS

const category = css`
  display: flex;
  align-items: center;
  // 생략
  ul {
    list-style: none;
    li {
      margin-right: 10px;
      float: left;
    }
  }

그러면 이렇게 아래와 같이 text가 수직(세로) 정렬이 된 것을 볼 수 있다.

결론

수직 정렬하려면, 수직 정렬하고 싶은 요소의 부모 요소에다가 아래 코드를 적용하면 된다.

display: flex;
align-items: center;