Bootstrap 3 and vertically centering responsive image in div

Question

How do I get the image to vertically center in a Div/Row. I have searched but all the solutions seem to point to this being a good one - but it won't work for me. I'm using Bootstrap 3...

https://www.bootply.com/vQFalT6KxG

Answer 1

Try this:

<div class="col-xs-12 col-xs-offset-6">
      <img src="https://image.flaticon.com/icons/png/128/149/149019.png" class="img-responsive">
</div>

Answer 2

To align a image vertically inside a div, you have to make the image absolute, set a top to 50% and translate vertically to -50%. I hope this helps:

HTML

<div class="vertical-align-img">
   <img src="https://image.flaticon.com/icons/png/128/149/149019.png" />
</div>

CSS:

.vertical-align-img{
    height: 500px;
    position: relative;
}

.vertical-align-img img{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

Or you can use display: table-cell;. Set display to table-cell, and set the verical-align to middle.

HTML

<div class="vertical-align-img">
   <img src="https://image.flaticon.com/icons/png/128/149/149019.png" />
</div>

CSS

.vertical-align-img{
    display: table-cell;
    height: 500px;
}