Горизонтальное и вертикальное центрирование изображения внутри DIV

Здравствуйте, мои дорогие подписчики.
Очередная заметка.
Сегодня утром меня спросили, как сделать изображение внутри

отцентрированное по горизонтали и по вертикали. Изображение не одинаковых размеров, т.е. может быть 100х100, может 50х100, 30х50 и т.д. Побродив пару минут по интернету, наткнулся на хорошее решение, которое решил записать и оставить на память себе и вам.

Итак сам HTML

<div class="imageholder">
<br />
  <br />
<div class="inner">
<img alt="Image vertically centred" height="97" src="photo.jpg" width="150" /></div>
</div>
</div>

А вот и CSS обрабатывающий этот HTML

.imageholder {

position:relative;

display:table;

height: 449px;

width: 615px;

vertical-align: middle;

text-align: center;

border: 1px solid #CCCCCC;

background:red;

text-align:center;

}

.inner {

width:100%;

display:table-cell;

vertical-align:middle;

position:relative;

text-align:center;

}

.inner img{

display:inline;

vertical-align:middle;

}

Пример действия вот тут http://www.pmob.co.uk/temp/vertical-align3.htm