horizontal and vertical centered element

Hi,
maybe this question is too easy, but I still could not make it work in all browsers. There are modern browsers and then there is Internet Explorer .
Is there an easy template to put a picture centered both vertically AND horizontally? If we start a web project we'd like putting a "under construction" png image containig the logo already. Which preset of CSS Sculptor would be best to handle it?

The best way to handle this is to add a padding to the outer div that contains the image, this will center the image horizontally and vertically and it should be consistent in all browsers.

For example:

.test {
padding:10px;
}

and

<div class="test">
<img src="test.jpg" />
</div>

If you did want a div to be actually centered on the (screen using CSS, then you would need a little arithmetic too.

Make your div (e.g. 'Container') for your content - image, text, whatever, and give it the height and width that you want.

Example:

#Container {
	height: 250px;
	width: 400px;
}

• To center the div, give it a top margin of minus half its height ( -125px), and its left margin of minus half its width (-200px.).
• Give it a position value of 'absolute'.
• Give placement values of 50% for top, and 50% for left.

#Container {
	height: 250px;
	width: 400px;
	margin-top: -125px;
	margin-left: -200px;
	position: absolute;
	top: 50%;
	left: 50%;
	text-align: center;
}

This will centre the div on your page.

This is it, with background, border and color styles also added. Resize your window to test it.

Thanks neilo, it looks like i missed the part about centering an image in a page not a div.