HTML - DIV vertically center align image/elements

After answering the same question many times on SO(Stackoverflow) I thought of putting this post here. It's very simple with CSS display: table-cell; property.

The display: table-cell; property is supported by all browsers except IE7: When can I use CSS Table display?

<div>
    <img src="http://www.isanam.com/scraps/hi-hello/hi-hello-21.gif" />
</div>

div{
  width: 500px;
  height: 500px;
  border: 1px solid #f00;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

Here is the demo - http://jsfiddle.net/x6jDu/