bootstrap carousel center image vertical and horizontal - html

Question

I have a two image carousel where each image is a different size. I am trying to make all of them vertically align in the middle in order to look much more cleaner.
I tried: margin, display: block, vertical-align: middle. none make the images in the carousel center.
<div class="container">
<div class="col-md-12 text-align-center">
<h2 class="bold_font">FEATURED PARTNERS</h2><br>
</div>
<div class="row">
<div class="col-xs-4">
<a href="../cards/list-partners.php">
<div class="hvrbox">
<img src="img/_stock_mwc_partners.jpg" class="img-responsive hvrbox-layer_bottom">
<div class=" hvrbox-mwc-orange hvrbox-layer_top hvrbox-layer_slideright">
<div class="hvrbox-text">
<h2>BROWSE<br>PARTNERS</h2>
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-8">
<div id="imageCarousel" class="carousel slide" data-interval="2000" data-ride="carousel" data-pause="hover" data-wrap="true">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-md-6 img-center-vertical">
<img src="img/uploads/merchant-12-GLOBAL ELITE DENTAL CLINIC.jpg" class="img-responsive">
</div>
<div class="col-md-6 img-center-vertical">
<img src="img/uploads/merchant-17-Mimmo Logo.jpg" class="img-responsive">
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-6 img-center-vertical">
<img src="img/uploads/merchant-18-LOGO CORE.png" class="img-responsive">
</div>
<div class="col-md-6 img-center-vertical">
<img src="img/uploads/merchant-19-docnic_newlogo-3.png" class="img-responsive">
</div>
</div>
</div>
</div>
<a href="#imageCarousel" class="carousel-control left" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#imageCarousel" class="carousel-control right" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>

Answer 1

We can achieve this using display table & display table cell.
.item row{
display:table;
}
.img-center-vertical{
display:table-cell;
vertical-align:middle;
height:300px;
float: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<div class="container">
<div class="col-md-12 text-align-center">
<h2 class="bold_font">FEATURED PARTNERS</h2><br>
</div>
<div class="row">
<div class="col-xs-4">
<a href="../cards/list-partners.php">
<div class="hvrbox">
<img src="http://placehold.it/300/f44336/000000" class="img-responsive hvrbox-layer_bottom">
<div class=" hvrbox-mwc-orange hvrbox-layer_top hvrbox-layer_slideright">
<div class="hvrbox-text">
<h2>BROWSE<br>PARTNERS</h2>
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-8">
<div id="imageCarousel" class="carousel slide" data-interval="false" data-ride="carousel" data-pause="hover" data-wrap="true">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-md-6 img-center-vertical">
<img src="http://placehold.it/300/f44336/000000" class="img-responsive">
</div>
<div class="col-md-6 img-center-vertical">
<img src="http://placehold.it/200/f44336/000000" class="img-responsive">
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-6 img-center-vertical">
<img src="http://placehold.it/300/f44336/000000" class="img-responsive">
</div>
<div class="col-md-6 img-center-vertical">
<img src="http://placehold.it/200/f44336/000000" class="img-responsive">
</div>
</div>
</div>
</div>
<a href="#imageCarousel" class="carousel-control left" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#imageCarousel" class="carousel-control right" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
Check out the codepen

Answer 2

.img-center-vertical {
display: inline-block;
text-align: center;
justify-content: center;
}

Answer 3

Try this
.img-center-vertical {
display: flex;
align-items: center;
justify-content: center;
}