How to center my entire webpage including the background

i want the part with the border to be centered on all screen resoultions. is this possible with the margin-top and margin-bottom properties?

HTML:

<!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>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Site</title>
</head>

<body>

<div id="container">
<div id="body">
<img src="2.png" width="1000" height="100" />
<center>
    <ul class="navbar">
        <li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li><li><a href="contact.html">Contact</a></li><li><a href="services.html">Services</a></li><li><a href="biography.html">Biography</a></li>
    </ul>
</center>
</div>    
</div>
</body>
</html>

CSS:

@charset "utf-8";

html {
    text-align: center
}

#container {
    margin-left:auto;
    margin-right:auto;
    margin-top:50 auto;
    margin-bottom:50 auto;
    width:960px;
    background-color:#666666;
}

    #body {
        background-color:#666666;
        width:1000px;
        height:1000px;
        border:3px solid #FFFFFF;
        margin-top:50px auto;
    }

    .navbar {
        margin:0px;
        background-color:#66FF33;
        text-align:center;
        list-style:none;
        border-bottom:none;
        padding-left:0px;    
    }


    ul.navbar li {
        width:20%;
        display:inline-block;
    }

    ul.navbar a {
        display:block;
        width:100%;
        margin:0px;
        padding:10px 0px;
        text-decoration:none;
    }

    ul.navbar a:hover {
        background-color:#33FFD7;
    }

    body {
        background-color:#333333;
    }

Solution

Try:

#container{
  width:960px;
  margin:0 auto;
  /*more CSS*/
}

You can change 0 to whatever, like 50px. Your image width is larger than 960px though.

Maybe you want something like this:

var pre = onload; // window is implicit
onload = function(){ // I personally don't indent directly inside the onload
if(pre)pre(); // execute old window.onload if it existed
var doc = document, IE = parseFloat(navigator.appVersion.split('MSIE')[1]);
function E(e){
  return doc.getElementById(e);
}
function alignTop(id){
  var e = E(id), w, h;
  if(IE){
    h = parseInt(e.currentStyle.height);
  }
  else{
    h = parseInt(getComputedStyle(e).getPropertyValue('height'));
  }
  w = innerHeight || doc.documentElement.clientHeight || doc.body.clientHeight;
  e.style.marginTop = w/2-h/2+'px';
}
alignTop('container');
}

You should put your script tag in the head so the body is defined in some older Browsers. I would use external JavaScript, so it's cached, like:

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <title>Your Title Here</title>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <meta name='keywords' content='some words to help SEO here' />
    <style type='text/css'>
      @import 'common.css'; @import 'thisPage.css';
    </style>
    <script type='text/javascript' scr='someName.js'></script>
  </head>
<body>
  <div>
    <div id='container'>Example Only</div>
  </div>
</body>
</html>

To see a working model, visit http://jsfiddle.net/MeMQz/2/ .