Vertical align an image inside a div with line-height

I have looked for this many times and always I forget to write it down. You can find many tutorial about vertical align an image with CSS and to be honest most of them used complex technics, so that’s why I am writting a blog post with this one. It’s quite easy and with two lines in your CSS you can achieve it.

This is the HTML:
<div>
<img alt=”" />
</div>

This is the CSS:
div {
height:200px;
line-height: 200px;
}
div img {
vertical-align: middle;
}