[HTML]div를 센터정렬 하기..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

전에는 table로 레이아웃을 잡았기 때문에 테이블을 센터정렬하면 쉽사리 해결되어서 이것때문에 고민해 본적이 없는데 이젠 레이아웃을 div로 잡으니까 웹페이지 자체를 중앙에 나타나게 하려니까 정렬이 먹지 않았다. text-align같은 걸로는 div가 정렬되지 않았는데 인터넷에서 많은 얘기들이 있었는데 이것저것 다 달라서 적용하는데 약간 애먹었다.

결론은 상당히 쉽다. 웹페이지 레이아웃을 잡으려면 전체를 묶는 div가 있어야 하니까 가장 외부의 레이아웃을 잡는 div에

CSS

margin: 0 auto;

margin을 위에처럼 주면 된다.


margin을 주었을때는 순서가 Top, Right, Bottom, Left 순으로 작성되므로 위처럼 축약형태는 결국

margin: 0 auto 0 auto;

와 같은 형태가 되고 Top, Bottom은 여백은 0을 주고 Left, Right는 auto로 준다는 뜻이고 이렇게 하면 좌우가 자동으로 먹어서 div가 센터에 정렬된다.