how to align in centre using html css

i'm new to html and the whole web development process (so excuse me if this is a stupid question) but how can i center a form in the middle of the page? I have the below code, but when i apply it, the form aligns centre but sticks to the top of the page - why? i can adjust it manually but i imagine that there will be problems depending on the resolution the site is v开发者_如何学运维iewed later down the line.

 #formWrapper{
    width:550px;
padding 2em 0 2em 0;                    border:solid 5px #F1F1F1;
    margin-top: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-left: auto;
    background-color: #AFC8DE;
}

#formWrapper{
    width:550px;
    padding: 2em 0 2em 0;                    
    border:solid 5px #F1F1F1;
    margin:0 auto;
    background-color: #AFC8DE;
}

And for verticaly align the div look here for an example

http://stylizedweb.com/2008/02/01/vertical-align-div/

you're missing colon after padding

auto for margins will only work when an explicit width has been defined but doesn't work for vertically centering things - this is actually not very easy to do in CSS. the simplest way is to do this

#formWrapper {
    height: 400px;
    width: 550px;
    position: absolute;
    top: 50%; /*position halfway down the page */
    margin-top: -200px; /*shift item up half it's width (assuming here the height is 400px)*/
    left: 50%; /*position in center of page */
    margin-left: -275px; /*shift item left half it's width (working with your width of 550px)*/
    /*add your other values here, 
    but not anything that will conflict with the above */

}

you need a ":" after your padding!

#formWrapper{
width:550px;
padding: 2em 0 2em 0;                    
border:solid 5px #F1F1F1;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
background-color: #AFC8DE;
}

If that's directly copy/pasted, there's some syntax errors that need to be addressed:

You need a colon after padding, and if you have all the margins set to auto, you don't need to specify each individual subset, you can just state margin: auto which will use auto for all the margins.

#formWrapper
{
width: 550px;
padding: 2em 0 2em 0;                    
border: solid 5px #F1F1F1;
margin: auto;
background-color: #AFC8DE;
}