How to vertically center an image inside of a div element in HTML using CSS?

Question

I have a markup like this:

<div>   <img /> </div> 

The div is higher than img:

div {   height: 100px; }  img {   height: dynamic-value-smaller-than-100px; } 

I need the image to be in the middle of the div (have same amout of white space above and below it).

I tried this and it does not work:

div {   vertical-align: middle; } 

Answer 1

if your image is purely decorative, then it might be a more semantic solution to use it as a background-image. You can then specify the position of the background

background-position: center center; 

If it is not decorative and constitutes valuable information then the img tag is justified. What you need to do in such case is style the containing div with the following properties:

div{     display: table-cell; vertical-align: middle  } 

Read more about this technique here. Reported to not work on IE6/7 (works on IE8).