Centering responsive images that are scaled to the same height - html

Question

I am making all the images in my bootstrap grid the same height using an image wrapper and then retaining their native aspect ratios by letting their widths scale independently (see snippet below). Now I want to horizontally center them in their divs to make the layout tidier. I tried to use the image-container class below, but it hasn't worked in the various divs I've applied it to (currently just makes them disappear). Is there some way to horizontally center the images using the wrapper properties perhaps? I'd appreciate any helpful nudges. Thanks!
I'm looking for a successful way to:
keep the images responsively scaled to the same height with different aspect ratios (as seen in the snippet below)
horizontally center the images while retaining their responsive scaling (the point above)
See the snippet below for how the images are responsively scaled to the same height; the commented out image-container divs are one of my unsuccessful attempts to horizontally center the images after the scaling.
.thumbnail img{
max-width: 100%; /* do not stretch the bootstrap column */
}
.img-wrapper {
position: relative;
padding-bottom: 130%;
overflow: hidden;
width: 100%;
}
.img-wrapper img {
position: absolute;
top:0;
left:0;
width:auto;
height:100%;
}
.image-container {
display: flex;
justify-content: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<!--<div class="image-container">-->
<div class="thumbnail">
<div class="img-wrapper">
<img src="http://via.placeholder.com/150x300"/>
</div>
</div>
<!--</div>-->
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<!--<div class="image-container">-->
<div class="thumbnail">
<div class="img-wrapper">
<img src="http://via.placeholder.com/200x350"/>
</div>
</div>
<!--</div>-->
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<!--<div class="image-container">-->
<div class="thumbnail">
<div class="img-wrapper">
<img src="http://via.placeholder.com/150x300"/>
</div>
</div>
<!--</div>-->
</div>
</div>

Answer 1

display: flex in combination with justify-content: center actually does center your images; the problem is that you have absolute positioning inside the flex:
.img-wrapper img {
position: absolute;
}
Simply removing the above code will cause your images to be centered. Note that you'll probably also want to remove top and left, as those will have no effect with the removal of position: absolute:
.thumbnail img {
max-width: 100%;
/* do not stretch the bootstrap column */
}
.img-wrapper {
position: relative;
padding-bottom: 130%;
overflow: hidden;
width: 100%;
}
.img-wrapper img {
/* position: absolute;
top: 0;
left: 0; */
width: auto;
height: 100%;
}
.image-container {
display: flex;
justify-content: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="image-container">
<div class="thumbnail">
<div class="img-wrapper">
<img src="http://placehold.it/150x300" />
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="image-container">
<div class="thumbnail">
<div class="img-wrapper">
<img src="http://placehold.it/200x350" />
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="image-container">
<div class="thumbnail">
<div class="img-wrapper">
<img src="http://placehold.it/150x300" />
</div>
</div>
</div>
</div>
Hope this helps! :)