해당 코드에서 display: flex;, flex-direction: column;까지는 이해가 되었으나 align-items: center;와 justify-content: center;의 차이를 알 수 없어 찾아보게 되었다.
우선 justify-content의 경우 flex direction의 축을 따라 정렬을 정의하는 프로퍼티이다.
그리고 align-items는 축의 수직축을 따라 정렬되는 방식을 정의하는 프로퍼티이다.
따라서 해당 코드에서는 축이 세로로(flex-direction: column;) 설정되어 있기에 세로를 축으로 가운데 정렬한 뒤, 가로(세로축의 수직축)를 기준으로도 가운데 정렬하라는 뜻임을 알 수 있다.
