If you can define the parent's width and height, there's a simpler way to centralize the image without having to create a container for it.
For some reason, if you define the min-width, IE will recognize max-width as well.
This solution works for IE10+, Firefox and Chrome.
<div>
<img src="http://placehold.it/350x150"/>
</div>
div {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
border: 1px solid orange;
width: 100px;
height: 100px;
}
img{
min-width: 10%;
max-width: 100%;
min-height: 10%;
max-height: 100%;
}