기존에는 어떤 오브젝트라도 가운데로 정렬하기 위해 아래와 같은 코드를 사용해 왔습니다.

<table align="center">...
<div align="center">...

이것을 CSS기반으로 수정한다면

<table style="text-align: center;">...
<div style="text-align: center;">...

위와 같이 사용할 수 있는데, 이것은 블럭 레벨 오브젝트(table,div,p etc) 안에 있는 인라인 오브젝트(일반 텍스트, img etc)에만 적용되는 값입니다.
기존의 속성과 동일하게 블럭 레벨 오브젝트를 중간에 배치하고 싶다면 해당 오브젝트에 아래와 같이 margin을 사용합니다.

<table style="margin: 0 auto;">...

또는

table {
   margin: 0 auto;
  }

단, 사용시에는 아래와 같은 조건이 충족되어야 합니다.

조건:

• 해당 오브젝트의 width가 설정되어 있어야 합니다.
• DTD가 선언 되어 있어야 합니다.

단순히 margin:0 auto;를 사용했는데 적용이 되지 않을 경우엔 위의 두 조건이 충족되었는지 다시 한번 확인해 보아야겠습니다.

NN4와 익스5.5 이하 버젼에서는 margin: 0 auto;만으로는 가운데 정렬이 되지 않습니다.
익스6, 익스7에서도 DTD가 선언되어있지 않으면 하위 호환성을 위해 quirks-mode로 렌더링을 하기때문에 가운데 정렬이 되지 않습니다.

이때문에 부모 엘리먼트에 text-align: center;를 같이 적용시켜줘야합니다.

body {
   text-align: center;
   }
 
div {
   margin: 0 auto;
   width: 80%;
   text-align: left;
   }

vertical-align: middle;을 사용하여 수직 정렬을 시도한 많은 분들을 위해..
수직으로의 가운데 정렬에 관해 정리하겠습니다.
많은 분들의 참여바랍니다.