margin: 0 auto 와 text-align: center의 차이점

1. text-align: center

 

정렬대상이 inline 요소일 때 사용하는 방식이다. 정렬할 때 부모 block 요소를 가진 부분에 적용을 하면된다.

inline 요소에 text-align: center를 했을 때 적용되지 않냐면 inline 요소는 content의 넓이만큼(글자크기, 글자수)만 공간을 차지하기때문이다.  text-align: center 를 적용시켜도 이미 딱 그 요소의 넓이만큼만 공간을 차지하고 있으니 움직일 공간이 없다. 그래서 부모 block 요소에 적용을 해야한다. block 요소는 기본적으로 한줄을 다 차지하기 때문이다.

그러면 그 요소에 속한 inline 요소들이 정렬된다.

2. margin: 0 auto

 

이 정렬방법은 정렬대상이 block 요소일 때 사용하는 방식이다. 그리고 이 block 요소의 width는 정해져 있어야한다.

이미지 같은 경우엔 기본적으로 이미지마다 사이즈가 있으니 img 에 직접 적용할 수 있겠지만, div 태그 같은 경우엔

width="165" 과 같이 고정된 값이 있어야만 이 너비를 제외한 나머지 공간을 margin 값이 똑같이 나눠가지면서 정렬이 되기 때문이다.

 

 

출처:https://www.codeit.kr/community/threads/10663