Image (of unknown size) vertically centered inside a div in css

You may have encountered the complexity of centering an image inside a div vertically similar to what was possible with table cell (<td>) and valign property (valign=middle)

Here is an example on how to do it with CSS

<style>
div.holder {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #DDDDDD;
    display: table-cell;
    height: 300px;
    text-align: center;
    vertical-align: middle;
    width: 748px;
}
</style>


<div class="holder">
	<span id="container">
		<img src="image.png">
	</span>
</div>

<br clear='all' />
<div class="holder">
	<span id="container">
		<img src="image2.png">
	</span>
</div>

<br clear='all' />
<div class="holder">
	<span id="container">
		<img src="image3.png">
	</span>
</div>