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

Question

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?

You may want to consider how you would leverage Bootstrap's `flex-box` classes, see: https://v4-alpha.getbootstrap.com/utilities/flexbox/#align-items — UncaughtTypeError, Jan 04 '18 at 12:39
There's no reason for extra CSS. Just use the Bootstrap flex util classes: https://www.codeply.com/go/Niu8NCcdqj — Carol Skelly, Jan 04 '18 at 13:05
@ZimSystem, I don't understand why your code is not working properly in my case. — KhiladiBhaiyya, Jan 05 '18 at 04:06

score 2 · Accepted Answer · edited Jan 04 '18 at 12:53

2

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>

edited Jan 04 '18 at 12:53

UncaughtTypeError

8,226
4
23
38

answered Jan 04 '18 at 12:35

vj.madamala7

109
9

well it works but it's a bit out of context ... we need to use bootstrap and no general CSS styling – Temani Afif Jan 04 '18 at 13:10

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

1 Answers1