How do I center a container in my HTML/CSS?

I have developed a website as part of my assignment. As I am new to html/css I could not figure some problems out of my code. The assignment specifications says that the screen size should be in certain size so that majority browsers can open it and the user should not experience any scroll activties. So I have used div to divide the whole page to fit the size. However, the container(In my code named as 'box') is set to the left side of the brower body and I have to set it centred, but I do not know how to fix it. Can anyone give me some help, please and thank you.

My HTML:

<!DOCTYPE html>
<html>
<head>
<title>habibe Naby</title>
<link rel="stylesheet" href="Websystems.css">
</head>
<body>
<div id="box">
    <div id="header">
     <img id="image" src="spring.jpeg">
     <p id="text">Welcome to My Homepage</p>
    </div>

    <div id="under">
            <div id="upper">
                    <div id="leftbar">
                            <div class="list">
                            <ul>
                                    <li><a href="../index.html">Home</a></li>
                                            <li><a href="past.html">Past</a></li>
                                            <li><a href="future.html">Future</a></li>
                                            <li><a href="comments.html">Comments</a>   

                                    </li>
                             </ul>
                            </div>
                    </div>
                    <div id="rightbar">
                    <div  id="title">Habibe Naby</div>
                       <p>this is my name and                           

                        I<spanclass="special">Danny</span>.Ihave    a .. </p>
                    </div>
            </div>
  <div id="footer">copyrights&copy</div>
  </div>

My CSS:

body
{
    height: 750px;
    margin: 2px;
    padding: 2px;
    width: 1000px;
}


#box 
{
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    height:100%;
    border:1px solid #8D8D8D;
}


#header 
{
    height: 150px; 
    width: 100%;
    position: relative;
}


#image 
{
    height: 150px; 
    width: 1000px;
}


#text 
{
    z-index: 100; 
position: absolute;    
color: darkolivegreen; 
    font-style: italic;
font-size: 32px;
font-weight: bolder;
left: 300px; 
top: 25px;
}

#leftbar
{
    float: left;
    width: 200px;
    height: 560px; 
    margin: 0px;
    padding: 0px;
    background-color: azure;
}

.list
{ 
    margin-top: 40px;
    margin-left: auto;  
    text-decoration: underline;
    color:blueviolet; 
    font-size: 20px; 
}


.list ul 
{
    list-style: none; 
}

#rightbar 
{
    float: right;
    width: 800px;
    height: 560px;
    margin: 0px;
    padding: 0px;
    background: mintcream;
}

#title 
{
    margin-left: 80px; 
    margin-top: 30px;
    font-size: 28px;
    font-weight: normal;
    font-style: italic;
    color: blueviolet;
}


#footer 
{
    clear: both;
    height: 40px;
    text-align: center;
    background-color: oliveDrab;
    margin 0px;
    padding: 0px;
    color: white;
}

.special
{
    font-size: 20px; 
    font-weight: bold;
    font-family: "New Century Schoolbook", Times, sans-serif;
    color: dodgerblue;
} 


p, pre
{
    padding: 10px 20px;
    margin-left: 50px;
    margin-right: 50px;
    color: darkslateblue;
 }

回答1:

Jsfiddle: http://jsfiddle.net/2gtsK/show/

Removed width from body, Added margin:0 auto to #box

margin:0 auto is same as:

margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;

body
{
    height: 750px;
    margin: 2px;
    padding: 2px;
}


#box 
{
    width: 1000px;
    margin: 0 auto;
    height:100%;
    border:1px solid #8D8D8D;
}

回答2:

You can wrap it by another div and set that div's text-align:center;