[FIXED] How to align the image in center inside a div using Bootstrap 4?

Issue

I'm using the latest version of Bootstrap i.e. v4.0.0-beta.3 and I've an image which is located inside a div tag whose height is fixed and I want to align the image in the absolute center of the div tag. Although I'm able to align the image in horizontal center using mx-auto and d-block classes but for the vertical alignment, I'm unable to do so even after following the methods from many stackoverflow answers like this and this. Here is the code.

.border-section {
  border: 2px solid #D0D0D0;
  margin-top: 20px;
}

<div class="container">
  <div class="row">
    <div class="col-sm-3 mr-4 border-section" style="height:290px">
      <img class="mx-auto d-block img-fluid" src="http://tech21info.com/admin/wp-content/uploads/2013/03/chrome-logo-200x200.png" alt="View">
    </div>
  </div>
</div>

Can anyone please help?

Solution

Try this

.border-section {
  border: 2px solid #D0D0D0;
  margin-top: 20px;
  position: relative;
}

img {
  position: absolute;
  left: 0;
  right: 0;
  display: block;
  margin: auto;
  top: 0;
  bottom: 0;
}

<div class="container">
  <div class="row">
    <div class="col-sm-3 mr-4 border-section" style="height:290px">
      <img class="mx-auto d-block img-fluid" src="http://tech21info.com/admin/wp-content/uploads/2013/03/chrome-logo-200x200.png" alt="View">
    </div>
  </div>
</div>

Answered By - vj.madamala7

Answer Checked By - Dawn Plyler (PHPFixing Volunteer)