I got everything to work in most browsers, but not always in IE11. Apparently, IE 11 ignores width/height inside display:table-cell.

The solution that almost worked, see CodePen. It works in Chrome (left), IE10(middle), but NOT in IE11(right)

<div class="container">
 <div class="cell">
 <img src="http://i.imgur.com/kpRaL9K.jpg"/>
 </div>
</div>

.container {
width:100px;
height:100px;
display: table;
table-layout: fixed; /*crucial for IE*/
border: 1px solid black;
}
.cell {
display: table-cell;
height:100px;
vertical-align: middle;
text-align:center;
}

img {
max-width: 100%;
max-height: 100%;
margin: auto;
}