Vertical Center with Flexbox and alignment of child items

Question

Only getting around to trying out flexbox now and I'm using it to vertically center content inside a div.

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

    <div class="parent">
       <h1>Title</h1>
       <p>Paragraph one.</p>
       <p>Paragraph two.</p>
    </div>

So when I do this it works but the child elements are placed beside each other like they're not block items anymore. How can I have it that they're vertically centered but stacked on top of each other?

Cheers!

Go read up on `flex-direction` … – 04FS Feb 28 '19 at 08:43 — 04FS, Feb 28 '19 at 08:43
@04FS Thanks, flex-direction: column; does it. – BarryWalsh Feb 28 '19 at 08:45 — BarryWalsh, Feb 28 '19 at 08:45

score 1 · Accepted Answer · answered Feb 28 '19 at 08:47

If you want to show elements in column you need to use flex-direction: column style property.

.parent{
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

<div class="parent">
   <h1>Title</h1>
   <p>Paragraph one.</p>
   <p>Paragraph two.</p>
</div>

Vertical Center with Flexbox and alignment of child items

1 Answers1