centering <div> in browser window

[PixelPaul]

I have a fixed size <div> that I would like to have centered vertically and horizontally in the browser window. I am able to get it centered horizontally, but cannot figure out how to get it to center vertically. Any ideas?

Thanks in advance

[Paul O'B]

Hi,

You could try something like this:

<style type="text/css" media="screen">
html,body {
 height: 100%; 
}
.centre {
 position: absolute;
 left: 50%;
 top: 50%;
width:300px;
height:300px; 
margin-top: -150px; /* make this half your div height */
 margin-left: -150px; /* make this half your div width */
}
</style>

You will need to test in the browsers you wish to support but it works ok in IE6, mozilla 1.2 & Opera7.

Paul