[CSS] margin: auto가 적용되지 않을 때

margin: auto를 사용해도 중앙 배치가 되지 않을 때에는 2가지 경우가 있다.

1. 해당 요소가 블록 요소가 아닐 때

인라인 요소인 경우 해당 요소를 감싸고 있는 부모 요소에 text-align: center를 적용하면 해결된다.

2. 해당 요소의 width가 자동으로 전체 사이즈 만큼 할당될 때

width가 자동으로 설정된 경우 요소에 flex같은 설정을 주어 center 설정으로 중앙 배치를 하거나

width를 요소의 크기만큼 설정하도록 display: inline-block를 적용하여 위 1번 방법을 적용하면된다.

위 상태에서 해당 방법들을 적용한 예시는 아래와 같다.

1. flex + justify-content: center
   

2. inline-block + text-align: center