Center vertically and horizontally

[fheppell]

I've set up this testing website here
It has a full screen background image and a content box in the middle. How would I horizontally center the box.
I'll post the html and css here as well

html, body {
        width: 100%;
        padding: 0;
        margin: 0;


      }

      #full-screen-background-image {
        z-index: -999;
        min-height: 100%;
        min-width: 1024px;
        width: 100%;
        height: auto;
        position: fixed;
        top: 0;
        left: 0;
      }

      #wrapper {
        position: relative;
        width: 800px;
        min-height: 400px;
        margin: 100px auto;
        color: #333;
        margin-left: auto;
        margin-right: auto;
        padding:10px;
        background-color:#C7C7C7; /*hex fallback for wrapper*/
        background-color: rgba(500,500,500,0.8);
      }

and the html

<img alt="full screen background image" src="http://www.swangardenimages.co.uk/swangardenimages/Gallery/Pages/The_Gardens_of_Easton_Lodge_1_files/Media/Courtyard%20and%20Fountain%20/Courtyard%20and%20Fountain%20.jpg" id="full-screen-background-image" /> 
        <div id="wrapper">
            <h1>Swan Garden Images</h1>
            <p>Yada Yada</p>
            <p>Stuff</p>
            <a href="#">Link</a>
        </div>

Thanks in advance

[TonyG_cyprus]

maybe

        margin: auto auto auto auto;

will do it, instead of

        margin-left: auto;
        margin-right: auto;

[pixelsoul]

You're talking about getting it right in the middle of the screen, right? I am sure there are plent of ways of doing it, I do it with two divs though. You can look at my site for an example http://www.pixelsoul.com

The div that controlls the vertical alignment I called "stretch" and it goes around my main div "wrapper". The only real important style is on the stetch div.

#stretch {
    padding:0 0 30px 0;
    margin: -185px 0 0 0;
    position: absolute;
    top: 50%;
    width: 100%;
}

[JorgeM]

Here is another way to accomplish it. I've modified your "wrapper" ID styles as follows:

    #wrapper {
        width:800px;
        height:400px;
        position:absolute;
        left:50%;
        top:50%;
        margin:-200px 0 0 -400px;
        color: #333;
        padding:10px;
        background-color:#C7C7C7; /*hex fallback for wrapper*/
        background-color: rgba(500,500,500,0.8);
    }

[fheppell]

Thanks for all the help everyone.