Can't align <div> to center

Question

I'm trying to align a 'div' attribute to the center of the page (horizontally). The problem is that whatever attributes I've used, the 'div' continues to be aligned to left. The 'div' which I am reffering to, is the page 'div' of the webpage, which is inside the 'html' and the 'body' attributes. Here's the CSS code:

#page{
    margin-top:20px;
    margin-bottom:20px;
    margin-left: auto;
    margin-right:auto;

    border-color: black;
    border-style: solid;
    border-width: thin;

    overflow:auto;

    padding-bottom: 10px;
    padding-top: 0px;

    width:1200px;
    background-color:#ffffff;
    font-family:Arial, Helvetica, sans-serif;
    color:black;
    font-size:12px;    
    height:700px;
}

and the 'html', 'body' CSS code is the following:

html,body {
    background-color:#FFFFFF;
    margin-left: auto;
    margin-right: auto;
}

Note that if I remove the "overflow" property, the div is aligned to the center of the page (although, it overlays the menu which is on top of it) but I need the "overflow" property to automatically add scrollbars if the width/height of the page which would be displayed inside this div is greater than those specified in the CSS.

Answer 1

I haven't coded anything in awhile, however normally when I am creating a centered page:

html, body { width: 100%; height: 100%; margin: 0 auto; text-align: center; }

Then for the div:

#page { width: 900px; overflow: hidden; text-align: left; margin: 20px 0 20px 0; }

That may or may not work, like I said, it has been awhile.