Flex vertical align not working | Sololearn: Learn to code for FREE!

+1

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

+3

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

+4

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.

+4

Use html, body { height: 100% }

+3

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

+2

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

+2

Calviղ Thanks. I honestly thoughts they same

+2

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.