CSS CSS Flexbox Layout Flexbox Properties Vertical and Horizontal Centering

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
.container {
    display: flex;
    min-height: 50vh;
  justify-content: center;
  align-items: center;
}
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,200 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

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,200 Points

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