Вертикальное и горизонтальное центрирование изображения на CSS без использования таблиц

Нижеприведенный небольшой фрагмент кода поможет вам центрировать изображение неизвестного размера по горизонтали и вертикали в каком-либо блоке (в примере это блок figure). Блок-обертка имеет явную ширину и высоту. Тег span используется как хак для internet explorer.

HTML

<figure class='logo'>
    <span></span>
    <img class='photo'/>
</figure>

CSS

    
.logo {
  display: block;
  text-align: center;
  display: block;
  text-align: center;
  vertical-align: middle;
  border: 4px solid #dddddd;
  padding: 4px;
  height: 74px;
  width: 74px; 
    }
.logo * {
    display: inline-block;
    height: 100%;
    vertical-align: middle; 
        }
.logo .photo 
        {
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 100%; 
        }