Search code examples
htmlcssimagecenter

vertical center an image without knowing dimensions

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>
Solution

  • 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.