vertical center an image without knowing dimensions

Question

I have centered a lot of stuff in my webdevelopment career, but I was wondering if there is a simple way to centering an image vertically without knowing the image's dimensions. Imagine a thumbnail list I get from the database. I don't want every item to be sticking to the top of the parent div.

<div id="wrapper">
    <div id="parent">
        <img src="path/i/got/from/database/image.png" />
    </div>
</div>

Answer 1

You could use this CSS on your parent:

#parent {
    display:table-cell;
    vertical-align:middle;
}

Note that this will make the parent element behave like an inline element.

Example.