margin, text-align, Flexbox와 Grid로 요소를 정렬합니다.
텍스트와 인라인 콘텐츠는 text-align, 폭이 있는 블록은 margin-inline:auto, 여러 자식의 양축 정렬은 Flexbox나 Grid를 사용합니다. 정렬 대상과 축을 먼저 구분합니다.
이번 예제의 출발점은 display: grid; place-items: center;입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 place-items를 start와 end로 바꿔보세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
정렬이 안 된다고 임의의 margin 값을 반복해서 넣기 전에 부모의 레이아웃 방식을 확인하세요.
직접 바꿔보세요place-items를 start와 end로 바꿔보세요.