[CSS] margin: 0 auto를 이용한 가운데 정렬

display 값이 block이거나 inline, inline-block등의 값일 때는 엘리먼트의 CSS를 margin-left: auto, margin-right: auto로 하면 부모 엘리먼트 안에서 가운데 정렬이 된다.

원래 필자는 가운데 정렬을 위해서 대부분 display값을 flex로 설정하고 justify-content 값을 center, align-items 값을 center로 하여 가운데 정렬을 했었는데, display가 block인 상태라면 간단하게 margin값 조정으로만으로도 가운데 정렬을 할 수 있다는 것을 알게 되었다.

margin : auto의 원리

A라는 엘리먼트의 margin-right의 값을 auto로 주었다면 이 A는 오른쪽으로 자신이 가질 수 있는 margin을 다 가진다. 그렇기 때문에 left, right의 margin 값을 auto로 하면 가운데 정렬이 되는 것이다.