Vertically centering inside a div with vh

Question

I'm currently trying to center an image inside a div that has it's dimensions set with vh. I tried using the display:table-cell; method which centered the image but began messing with the vw of other elements. I was wondering if there was another simpler way to be vertically centering this image inside a div that as vh. I know this might be a little confusing so hopefully my code down below can help!

Html:

<div class="graphic" style="background-color:#ff837b">
    <img src="images/WAInduo-02.svg" style="width: 100%; height: 50%;" />
</div>

CSS:

#induoIntro .graphic {
    display:block;
    height:100vh;
}

@Sid unfortunately I can't sue that method as you need a specified height which I can't do to using vh — kduan, Jul 26 '14 at 15:36
Create a jsfiddle. Give us exactly what you have tried so far. And when you saying messing with your other elements, what are those other elements, with the same class? — Dejan.S, Jul 26 '14 at 15:40

score 8 · Accepted Answer · edited Jun 19 '19 at 22:51

8

It seems that vertical-align:middle has some inconsistency with vw unit. Try positioning approach. Here is the solution for you.

CSS code:

.graphic {
  display: block;
  height: 100vh;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

.graphic img {
  vertical-align: middle;
  width: 100%;
  display: inline-block;
  height: 50%;
  position: absolute;
  top: 0;
  bottom: 0%;
  margin: auto;
}

Here is the working fiddle

edited Jun 19 '19 at 22:51

Reza Saadati

5,018
4
27
64

answered Jul 26 '14 at 15:57

Ashish Balchandani

1,228
1
8
13

While this does center the image correctly, it makes the content below it disappear. Any suggestions? Thanks for your help so far! – kduan Jul 26 '14 at 16:05
Can you update the fiddle with your code, I can help you resolve it – Ashish Balchandani Jul 26 '14 at 16:07
Nvm I figured it out!Just had to remove position: absolute; top:0; bottom:0; width: 100%; from .grpahic. Thanks! Can you explain how this work's a little though? – kduan Jul 26 '14 at 16:20
Its combination of positioning img and applying margin:auto, is doing trick in this case. – Ashish Balchandani Jul 26 '14 at 16:31

Vertically centering inside a div with vh

1 Answers1