[css] 박스 자체를 가운데 정렬 하고 싶을때 (text-align과 차이)

div나 section 등으로 만든 박스가 있다.

이 박스 내에 써진 글 뿐만 아니라 border인 테두리까지 가운데로 정렬 하고 싶다면 어떻게 해야할까?

 

CSS에서 일단 어느 정도 크기를 할지 (박스크기) 를 width와 height를 정해주고

margin-left : auto , margin-right : auto 를 { } 안에 써주면 가운데로 정렬이 된다!

 

 

text-align 과의 차이점은

얘는 text만 정렬되기 때문 box자체가 정렬되는 것이 아니다.

 

(그래서 만약 box width가 원하는 길이보다 짧다면

박스 내에서는 center지만 원하는 것보다 왼쪽으로 치우친 글을 만날 수 있게 된다.)