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; }