Vertical align image in div in Bootstrap

Question

I am trying to center align a few images vertically in a div. I am using bootstrap. The images have irregular size, hence, I am trying to vertically align them instead of resizing them. I saw many other links on stackoverflow, none helped till now. Here is my code, can somebody bail me out here?

<div class="col-md-12" style="background-color: #FFFFFF">
     <div class="row">
          <div class="col-md-3"><img style="height: 100%; width: 100%; object-fit: fill; vertical-align: middle; display: inline-block; position: relative;" src="{{ asset('bundles/app/images/home/awards/exist.png') }}" data-toggle="tooltip" title="{{ 'about-us.awards.exist'|trans }}" alt="" /></div>
          <div class="col-md-3"><img style="height: 100%; width: 100%; object-fit: fill; vertical-align: middle; display: inline-block; position: relative;" src="{{ asset('bundles/app/images/home/awards/esf.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.esf'|trans }}" alt="" /></div>
          <div class="col-md-3"><img style="height: 100%; width: 100%; object-fit: fill; vertical-align: middle; display: inline-block; position: relative;" src="{{ asset('bundles/app/images/home/awards/eu.png') }}" data-toggle="tooltip" title="{{ 'about-us.awards.eu'|trans }}" alt="" /></div>
          <div class="col-md-3"><img style="height: 100%; width: 100%; object-fit: fill; vertical-align: middle; display: inline-block; position: relative;" src="{{ asset('bundles/app/images/home/awards/bmwi.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.bmwi'|trans }}" alt="" /></div>
     </div>
     <div class="row">
          <div class="col-md-3"><img style="height: 100%; width: 100%; object-fit: fill;" src="{{ asset('bundles/app/images/home/awards/baystartup.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.baystartup'|trans }}" alt="" /></div>
          <div class="col-md-3"><img style="height: 100%; width: 100%; object-fit: fill;" src="{{ asset('bundles/app/images/home/awards/grm.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.grm'|trans }}" alt="" /></div>
          <div class="col-md-6"><img style="height: 100%; width: 100%; object-fit: fill;" src="{{ asset('bundles/app/images/home/awards/lmu.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.lmu'|trans }}" alt="" /></div>
     </div>
</div>

Answer 1

If you know the height of the biggest image per row, you can use something like this jsfiddle

   <div class="row">
  <div class="col-md-3" style="height: 600px;"><img src="https://fakeimg.pl/400x200/" style="position: relative;
  top: 50%;
  transform: translateY(-50%);" data-toggle="tooltip" title="{{ 'about-us.awards.exist'|trans }}" alt="" /></div>
  <div class="col-md-3" style="height: 600px;"><img src="https://fakeimg.pl/400x200/" style="position: relative;
  top: 50%;
  transform: translateY(-50%);" data-toggle="tooltip" title="{{ 'about-us.awards.exist'|trans }}" alt="" /></div>
  <div class="col-md-6" style="height: 600px;"><img src="https://fakeimg.pl/800x600/" data-toggle="tooltip" title="{{ 'about-us.awards.exist'|trans }}" alt="" /></div>
</div>