Cross Browser vertically and horizontally centered
/*
This centers an image of unknown size vertically and horizontally within a box. The wrapper box has an explicit width and height. The is a hack for internet explorer
<figure class='logo'>
<span></span>
<img class='photo'/>
</figure>
*/
.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%;
}