Today I Learned 2023.02.06.

문제발생

저 박스를 분명 스파르타피디아 만들 때 중앙으로 옮겼는데, 왜 안될까.
컨텐츠를 중앙으로 배열시키는 코드는 아래와 같다며, 분명 기억하는데...

display: flex;
flex-direction: row;
align-items: center;
justify-content: center;

시도해본 것들

① 처음 구글링을 했을 때, 가장 먼저 찾아 볼 수 있었던 코드였다.

text-align: center;

이를 실행했을 때, 결과값은 글자만 가운데로 옮겨졌다.

② 저 위의 코드의 설정 값을 변경해보았다.(flex-direction: row -> column)

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

이를 실행했을 때, 결과값은 안의 버튼이 가운데로 정렬되었다.
flex-direction 이라 함은 컨테이너 내부의 아이템들이 만들어지는 방향을 뜻한다고 한다.
Row는 가로로,
coulmn은 세로로,
컨테이너 내부 아이템들을 '만들어지는' 방향이라고 한다.

해결

정답은 전혀 생각치도 못한, margin이었다.
margin에 auto라는 명령어가 있는데, 이는 좌우 남은 공간을 균등하게 분배하는 의미인 것이다.

margin: auto;

결과물: