Search code examples
htmlsassflexboxvertical-alignment

Flexbox won't vertically align content

All of the flexbox tutorials that I've seen so far say that vertical align is done by using align-items and justify-content and setting both to center; however that doesn't seem to be working, as you can see below (I'm trying to align the lorem ipsum text). The browser I'm using is Chrome, if that matters.

Here's a codepen: http://codepen.io/anon/pen/QjBrEm

I've tried a lot of the suggestions here on Stack Overflow, for example:

body, html:
    height: 100%

These don't seem to work.

Solution

  • Your SASS should be:

      .initial
    background-color: #212121
    color: #ffffff
    display: flex
    align-items: center
    justify-content: center

    to align the content of that element as flexbox layout is not inherited by children.

    Codepen Demo