Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Matt Bryant
Matt Bryant
10,164 Points

Why is this image not centering vertically using flex?

I have a simple page and one square image that I want to center vertically and horizontally. Per the video on this, I have tried all three methods, and also tried viewing in different browsers. The image centers horizontally, but not vertically. It remains stuck against the top of the page, even when I stretch the browser way below the image. Thoughts?

The HTML:

<!doctype html>
<html lang="en">
  <head>
    <title>Test Page</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../css/normalize.css">
    <link rel="stylesheet" href="../css/main.css">
  </head>

  <body>
      <div class="container">
        <div class="logo">
          <img src="/images/logos/screen_method.png" alt="">
        </div>
      </div>
   </body>
</html>

The CSS:

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

3 Answers

Amber Cyr
Amber Cyr
19,699 Points
Amber Cyr
Amber Cyr
19,699 Points

Hi Matt - I have always found using percentages for heights do not work as expected and have always stuck to declaring them in pixels. I don't have an explanation as to why this is the case, however if you declare your height in pixels, say 500px, you will get your desired effect. Also a helpful hint would be adding a temporary border to your container to see exactly where its confines are when sizing. If you add one to your container element here with your image element inside, you will see that the container element is only as large as the image and not 100% of the page.

Amber Cyr
Amber Cyr
19,699 Points
Amber Cyr
Amber Cyr
19,699 Points

you need to add a height to your container. That should resolve the issue.

Matt Bryant
Matt Bryant
10,164 Points

Hi Amber - I tried adding a height: 100% to the .container class rule so that the image stayed centered as I changed the viewport size, but no change noticed.

Ben Payne
Ben Payne
1,464 Points

You might have to use PX's.

Matt Bryant
Matt Bryant
10,164 Points
Matt Bryant
Matt Bryant
10,164 Points

I figured it out! Thanks to your comments here, I was able to figure out that what I needed to add was this line to my CSS rule:

height: 100vh;

That makes my parent container the full height of the viewport, regardless of how much I stretch or shrink the page. I guess I forgot that bit along the way. Now my square image is dead center vertically and horizontally regardless of how I stretch the page. Thanks for your help!

Amber Cyr
Amber Cyr
19,699 Points

yay awesome! I always forget about vh; thanks for the reminder!