margin, text-align, Flexbox와 Grid로 요소를 정렬합니다.
텍스트와 인라인 콘텐츠는 text-align, 폭이 있는 블록은 margin-inline:auto, 여러 자식의 양축 정렬은 Flexbox나 Grid를 사용합니다. 정렬 대상과 축을 먼저 구분합니다.
display: grid와 place-items: center가 .stage 안의 칸 하나에서 대상 요소를 가로세로 모두 가운데에 놓습니다. 행이 하나뿐인 그리드에서 auto 크기 행은 min-height 180px까지 늘어나므로 세로 가운데도 .stage 전체 높이를 기준으로 잡힙니다. 정렬 값이 stretch가 아니라 center라서 초록 상자는 칸 너비로 늘어나지 않고 글자와 padding 크기만큼만 차지합니다.
그리드나 flex 항목에 margin: auto를 주면 남는 공간을 margin이 모두 가져가 place-items 없이도 가로세로 가운데에 놓입니다. 일반 블록 흐름에서는 세로 방향 auto margin이 0으로 계산돼 가로로만 가운데가 되는 것과 다른 점입니다.
정렬이 안 된다고 임의의 margin 값을 반복해서 넣기 전에 부모의 레이아웃 방식을 확인하세요.
직접 바꿔보세요place-items를 start와 end로 바꿔보세요.