Essentially all you do is:

1. Position your container div absolutely.
2. Place the top and left positions as 50%.
3. Set a height and width (since this is also for centering vertically).
4. Set the top and left margins to a negative number that is half the height and width you set. So if your width is 300 pixels, you’d set your margin-left to -150 pixels. If your height is 400 pixels, then set your margin-top to -200 pixels.

Sample:

.wrapper_container {
position: absolute;
top: 50%;
left: 50%;
width: 900px;
height: 545px;
margin-left: -450px; /*set to a negative number 1/2 of your width*/
margin-top: -272px; /*set to a negative number 1/2 of your height*/
background: url("/images/ui/splash.jpg") top left no-repeat;
display: block;
}


Naturally most people just want to center horizontally, in which case everyone just sets the body tag to text-align center (for IE), and then the container div to margin: 0 auto; (for FF). This is fairly common practice, I’m just including it here for posterity.

Sample:

body {
text-align: center;
}


.wrapper_container {
width: 980px;
margin: 0 auto;
}