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!

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 CSS Flexbox Layout Flexbox Properties Vertical and Horizontal Centering

Christopher Chard
Christopher Chard
3,087 Points
Posted by Christopher Chard
Christopher Chard
3,087 Points

align-items doesn't have any effect despite identical code to the lesson

Right at the start of the video, I've launched the workspace and previewed it and there's already a difference: Guil's flex-item fills the vertical space initially but mine doesn't.

After applying "justify-content: center;" and "align-items: center;" to .container, the flex-item moves to the horizontal centre but not the vertical centre.

Could this be due to browser differences? I am using IE 11. I have opened it in Safari on my iPhone 4s but the item filled the entire horizontal space so this didn't help me understand it!

Update: I should add that the other two approaches of "align-self: center;" or "margin: auto;" also had no vertical effect.

Christopher Chard
Christopher Chard
3,087 Points
Christopher Chard
Christopher Chard
3,087 Points 
.container {
    display: flex;
    min-height: 50vh;
  justify-content: center;
  align-items: center;
}
Christopher Chard
Christopher Chard
3,087 Points
Christopher Chard
Christopher Chard
3,087 Points 
<!DOCTYPE html>
<html>
<head>
    <title>Flexbox Layout</title>
    <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/page.css">
    <link rel="stylesheet" href="css/flexbox.css">
</head>
<body>
    <div class="container">
        <div class="item-4 item">
            Flex Item
            <p>Vertical and Horizontal centering made easy!</p>
        </div>
    </div>
</body>
</html>

1 Answer

Glenré Charl Labuschagné
Glenré Charl Labuschagné
23,203 Points
Glenré Charl Labuschagné
Glenré Charl Labuschagné
23,203 Points

Hi Christopher,

Please see: caniuse.com. Odd that it's not working. When in doubt prefix:

.container {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}
Christopher Chard
Christopher Chard
3,087 Points
Christopher Chard
Christopher Chard
3,087 Points

Thanks. Identified from caniuse.com that vertical alignment will not work when min-height is used in IE11.

Glenré Charl Labuschagné
Glenré Charl Labuschagné
23,203 Points
Glenré Charl Labuschagné
Glenré Charl Labuschagné
23,203 Points

Awesome: caniuse.com is a definite must have bookmark developer tool. Thanks for sharing your find about IE11.