Centering an image vertically in a div with a dynamic height

Question

I have a div that is 1/5 the vh of the screen. I want the image within that div to be centered vertically. I am able to center it horizontally but have tried the following code thus far:

http://jsfiddle.net/ws91188y/1/

img{
  width:25px;
}

.container-fluid > div{
  text-align:center;
  height: calc(100vh/5);
}

.container-fluid > div:nth-child(odd){
  background:yellow;
}

<div class="container-fluid">
 <div><img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg"></div>
 <div><img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg"></div>
 <div><img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg"></div>
 <div><img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg"></div>
 <div><img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg"></div>
</div>

The suggested duplicate question is not the same. They are asking to horizontally center. I am not. The question of their title is also not as specific. There are many questions for div's that are fixed or known heights. Mine is dynamic. The suggested answer did not work for my question. — sjmartin, Mar 27 '15 at 17:35
Go further down to the answer headed `Responsive Solution` which has both vertical and horizontal alignment including for dynamic dimensions. — Paulie_D, Mar 27 '15 at 17:37

score 2 · Accepted Answer · answered Mar 27 '15 at 17:28

You can give the parents divs relative positioning and the images absolute positioning:

img {
    width:25px;
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
}
.container-fluid > div {
    text-align:center;
    height: calc(100vh/5);
    position:relative;
}
.container-fluid > div:nth-child(odd) {
    background:yellow;
}

<div class="container-fluid">
    <div>
        <img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg">
    </div>
    <div>
        <img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg">
    </div>
    <div>
        <img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg">
    </div>
    <div>
        <img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg">
    </div>
    <div>
        <img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg">
    </div>
</div>

This works great! Can anyone explain the reason why we have to give the container "relative" and the image "absolute" with top and bottom 0? What exactly is going on to make that work? Thank you. — sjmartin, Mar 27 '15 at 17:36
By setting the position to absolute, the margin to auto and the top and bottom to zero, you allow the element to position itself vertically in the middle. You need to also set the position to relative on the parent, otherwise the centering will be relative to the next positioned ancestor, in this case the body. — j08691, Mar 27 '15 at 17:39

score 1 · Answer 2 · edited May 23 '17 at 11:45

There are couple of ways to achieve that, however it can be achieved by setting the same value for line-height and verticaly align the images at the middle by vertical-align: middle declaration as follows:

Example Here.

img{
  width:25px;
  vertical-align: middle;
}

.container-fluid > div {
  text-align:center;
  height: calc(100vh/5);
  line-height: calc(100vh/5);
}

.container-fluid > div:nth-child(odd){
  background:yellow;
}

<div class="container-fluid">
  <div><img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg"></div>
  <div><img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg"></div>
  <div><img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg"></div>
  <div><img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg"></div>
  <div><img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg"></div>
</div>

score 1 · Answer 3 · answered Mar 27 '15 at 17:28

DEMO

Add position:relative to the container.

.container-fluid > div {
    text-align:center;
    height: calc(100vh/5);
    position: relative;
}

Then on your img do:

img {
    width:25px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Centering an image vertically in a div with a dynamic height

3 Answers3