컨텐츠 가운데 정렬

난 그동안 웹 페이지를 만들때 전체 가운데 정렬을
일정 width값을 주고 margin: 0 auto를 사용 하였다.

.container{
    width:95%;
    max-width: 1920px;
    margin:0 auoto;
}

이런식으로...

그러다가 요즘 네이버 클로바의 메인페이지를 클론코딩 하고있는데
margin:0 auto;를 사용하지 않고도 하위 컨텐츠들이 가운데 정렬을 하고있는걸 발견했다.

도대체 어떤 방법을 써서 이렇게 한거지 하고 코드를 뒤적거린 결과
자식요소들에 display:inline-block을 주고 vertical-align:middle로 가로 정렬을 잡고
전체를 감싸는 부모요소에 text-align:center로 가운데 정렬을 잡는 방법이였다...!

나는 전혀 생각지 못하고 배울때 margin:0 auto;로 배웠으니 이것만 계속 썻는데
이렇게도 정렬을 할 수 있다는게 새롭기도하고 뒤통수를 맞은 기분이였다.

이렇게 같은걸 표현 하는데도 여러 방법이 있다는걸 깨닫게 해주는게 클론코딩의 장점이라 생각한다.
이 두개의 방법에 어떤 차이점이 있는지 공부하고 다시 이 포스트에 작성해야겠다.