Vertically center positioned

HTML & CSS
1

Hi

I was wondering how to make something (for example, an image) automatically position in the center of a div, vertically as well as horizontally?

For horizontal, it is “margin:0 auto;”

How to position automatically in the middle, vertically? If the outer div, in which the image is to be placed, has variable height and width.

Thanx

2

This article by Paul O’Brien shows how to do it with a fixed height:
http://www.pmob.co.uk/pob/hoz-vert-center.htm

At the bottom of the page, he links to an example where height is not fixed:
http://www.pmob.co.uk/pob/hoz-vert-center2.htm

3

Here’s another method that vertically aligns the horizontal content in relation to each other (but not necessarily with the parent outer as in the example that Ralph has linked to).

Vertical centring is awkward if you want older browser support. Modern browsers (IE8+, Firefox, Safari etc…) can all use the display:table properties and can vertically center quite easily.

4

Thank you for your help guys.