Vertically centering dynamically loaded image inside bootstrap modal - css

Question

How can i vertically center dynamically loaded image inside a div inside bootstrap modal?
My code is like
<div class="modal fade bs-example-modal-lg" id="post-expand-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
<div class="modal-vert-align-helper">
<div class="modal-dialog modal-lg modal-vert-align-center" role="document">
<div class="modal-content" style="border-radius: 0;">
<div class="modal-body">
<div class="row no-margin">
<div class="col-md-8 left" >
<center id="post-center" style="margin-top:0;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Penguins_walking_-Moltke_Harbour%2C_South_Georgia%2C_British_overseas_territory%2C_UK-8.jpg/220px-Penguins_walking_-Moltke_Harbour%2C_South_Georgia%2C_British_overseas_territory%2C_UK-8.jpg" id="full-img">
</center>
</div>
<div class="col-md-4 right"></div>
</div>
</div>
</div>
</div>
</div>
</div>
css
.modal-body{
min-height: 270px;
}
.left{
}
.right{
height:650px;
border:2px solid blue
}
#post-center{
background:grey;
height:100%;
width:100%;
}
#full-img{
}
I have created a fiddle here. Right now it looks like this
But i would like to make it look like this.
If anyone could help that would be great.

Answer 1

From your existing code and question it's hard to figure out what you want to achieve at different viewport widths, as you probably trimmed down your example too much, but I can only assume this helps:
.right {
border: 2px solid blue;
box-sizing: border-box;
height: 100%;
}
.gray-bg {
background: grey;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#media(max-height: 991px) {
.flex-me .gray-bg {
min-height: 80vh;
}
}
#media (min-width: 992px) {
.flex-me {
display: flex;
}
.gray-bg {
width: calc(100% + 15px);
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="modal fade bs-example-modal-lg" id="post-expand-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-vert-align-helper">
<div class="modal-dialog modal-lg modal-vert-align-center" role="document">
<div class="modal-content" style="border-radius: 0;">
<div class="modal-body">
<div class="row no-margin flex-me">
<div class="col-md-8">
<div class="text-center gray-bg">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Penguins_walking_-Moltke_Harbour%2C_South_Georgia%2C_British_overseas_territory%2C_UK-8.jpg/220px-Penguins_walking_-Moltke_Harbour%2C_South_Georgia%2C_British_overseas_territory%2C_UK-8.jpg"
id="full-img">
</div>
</div>
<div class="col-md-4">
<div class="right"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#post-expand-modal">
Launch Modal
</button>
Here's the fiddle.