Flex vertical align not working

Why does the align-items: center in flex not work? I've used justify-content, flex-direction, align-items, display:flex and even set the button as a flex item. It won't center vertically. https://code.sololearn.com/WTkLeDeOBQBe/?ref=app

7/3/2020 8:58:05 AM

Clueless Coder

7 Answers

New Answer

Sort by:

set the body height first, you'll see the difference

Taste

Taste ~♥~YO YO ~♥~ I wish I could set both of you as best answers. Thanks for the tip, weird how no one's mentioned that to me before.

Clueless Coder

Use html, body { height: 100% }

Calviղ

Clueless Coder for your reading https://stackoverflow.com/q/27612931/8265242

Calviղ

Thanks Calviղ , I set it as height: 100vh;

Clueless Coder

Calviղ Thanks. I honestly thoughts they same

Clueless Coder

Clueless Coder I use unit % rather than vh, vw whenever possible. It should be better practice, it's more versatile for building component for container, rather than constraint by the fixed dimension.

Calviղ