新手：为什么不能居中显示啊 _HTML/CSS

新手求救：为什么不能居中显示啊！！！
CSS代码如下：

body{ margin:0; padding:0; text-align:center;}
div#heard{ background:url(images/hd.gif) no-repeat; height:132px;}
div#pagebody{ background:url(images/content.gif) no-repeat; height:538px; padding:0 15px; }
div#footer{ background:url(images/ft.gif) no-repeat; height:100px; padding-top:30px;}

HMTL如下：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>实例</title>
<link rel="stylesheet" type="text/css" href="ALL.css" />
</head>

<body>
<div id="heard"></div>
<div id="pagebody"></div>
<div id="footer"></div>
</body>
打开后是左对齐，哪边出错了！

------解决方案--------------------

HTML code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>实例</title>
    <style>
        body
        {
            text-align: center;
        }
        div#main
        {
            margin-right: auto;
            margin-left: auto;
            width: 400px;
            vertical-align: middle;
            line-height: 200px;
        }
        div#heard
        {
            background: url(images/1.jpg) no-repeat;
            height: 132px;
        }
        div#pagebody
        {
            background: url(images/1.jpg) no-repeat;
            height: 538px;
        }
        div#footer
        {
            background: url(images/1.jpg) no-repeat;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id='main'>
        <div id="heard">
        </div>
        <div id="pagebody">
        </div>
        <div id="footer">
        </div>
    </div>
</body>
</html>