Vertically centering inside a div with vh [duplicate]

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
– kduan, Commented Jul 26, 2014 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
– Dejan.S, Commented Jul 26, 2014 at 15:40

Reza Saadati · Accepted Answer · 2019-06-19 22:51:47Z

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, 2019 at 22:51

Reza Saadati

5,4644 gold badges33 silver badges69 bronze badges

answered Jul 26, 2014 at 15:57

Ashish Balchandani

1,2761 gold badge9 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

kduan Over a year ago

While this does center the image correctly, it makes the content below it disappear. Any suggestions? Thanks for your help so far!

Ashish Balchandani Over a year ago

Can you update the fiddle with your code, I can help you resolve it

kduan Over a year ago

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?

Ashish Balchandani Over a year ago

Its combination of positioning img and applying margin:auto, is doing trick in this case.

Collectives™ on Stack Overflow

Vertically centering inside a div with vh [duplicate]

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related