CSS div centering issues [margin:0px auto; didn't seem to work]

programming web dev
1

I have a main container div that holds my stuff which is centered in the browser, but I have div that lays on top of the main container, i’ve tried margin:0px auto; and text-align:center for I.E but nothing seems to work to center the over laying div it seems to just push the main container down and stack on top of it. I’ve tried changing the z-index but that didn’t seem to work.


<style type="text/css">
body {
background-color:#191919;
margin:0px auto;
font:8pt verdana,sans-serif;
color:#FFFFFF;
}
#container {
margin:0 auto;
text-align:left;
width:635px;
height:690px;
}
#top {
width:635px;
height:88px;
}
#middle {
width:632px;
height:256px;
border:3px solid #fff;
background-image:url(home-bg.jpg); top left no-repeat;
}
#footer {
margin-top:150px;
width:225px;
height:13px;
}

#mainTxt {
    font:8pt verdana,sans-serif;
    color:#FFFFFF;
    position:relative;
    margin-left:auto;
    margin-right:auto;
    margin-top:185px;
    width:314px;
    height:449px;
    }
</style>
</head>
<body>
<div id="mainTxt">Main Content hear </div>
<div id="container">
  <div id="top">test</div>
  <div id="middle">test </div>
  <div id="footer">test</div>
</div>

Cheers