#wrapper {width:100%; text-align:center;}
#content {margin : 0 auto; text-align:left; width:800px;}
<div id="wrapper">
<div id="content">contents 800px</div>
</div>
text-align은 문자의 정렬을 의미하는데 여기서 문자는
inline요소로 생각하시면 됩니다.
즉, 한줄에 여러개가 위치할 수 있는거죠.
img는 기본적으로 inline요소로 다른 글자와 같이 같은줄에 위치할 수 있습니다.
그래서 text-align의 영향을 받습니다.
margin으로 img에 해도 중앙에 오지만
다른 글자와 같이 중앙에 오지 않을겁니다.
자신의 양옆 여백을 늘이는 방식이라서 그런거죠.
둘은 사용되는 곳,방법이 다릅니다.
div는 블록 레벨이므로 중앙 정렬 하려면 마진값을 정해줘야한다.
인라인 레벨 엘리먼트는 text-align의 영향을 받는다.
text-align:-moz-center; FF용 속성