CSS 중앙정렬 방법

01. block 요소나 칸 상자에 있는 인라인 콘텐츠를 중앙정렬하기 → text-align: center;

text-align을 block 요소(혹은 칸 상자)에 적용해야 하고, 적용 결과 inline contents를 정렬시켜준다.
lineheight를 콘텐츠box 높이만큼 주면 콘텐츠를 수직정렬도 할 수 있다.

02. 블록 요소 중앙정렬하기 → margin-left: Auto, margin-right: Auto

위와 똑같은 html에 margin-left: auto; 와 margin-right: auto;를 적용해도 중앙정렬이 되지 않는다. 이런 경우 width값을 주면 블록이 중앙정렬 된다.
mdn 설명에 따르면, 상하 마진은 span이나 code와 같은 대체되지 않는 inline 요소에 효과가 없다.

대체 요소(replaced element)란?

CSS의 대체 요소란, 자신의 표현 결과가 CSS의 범위를 벗어나는 요소로서, CSS 서식 모델과는 분리된 외부 객체인 요소이다.

즉, CSS는 대체 요소의 위치에 영향을 줄 수 있지만 콘텐츠에는 미치지 못한다. iframe 등 일부 대체 요소는 자신만의 스타일 시트를 가질 수도 있지만, 부모 문서의 스타일을 상속받지는 않는다.

CSS가 대체 요소에 영향을 줄 수 있는 다른 유일한 방법은, 일련의 속성을 통해 요소 박스에서 콘텐츠의 위치를 제어하는 것이다.
대표적인 대체 요소에는 iframe, video, embed, img가 있다.

03. mdn에서 제안하는 수평정렬 방식 → display: flex, justify-content: center

이 방식은 콘텐츠를 수평정렬해준다. 블록은 수평정렬해주지 않는다.

display는 블록과 인라인 요소 중 어느 쪽으로 처리할 지와 flow, grid, flex처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정한다.

mdn은 display: flex; justify-content: center;가 지원되지 않는 경우 margin:0 auto;를 사용하도록 하고 있지만, 02 방식과 마찬가지로 width 값을 지정해주어야 블록 요소가 중앙정렬된다.


수직정렬도 하려면 이렇게 하면 된다(2022-04-13 수정)

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