Flex vertical align not working

Question

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

Answer 1

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

Answer 2

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.

Answer 3

Use
html,
body {
height: 100%
}

Answer 4

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

Answer 5

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

Answer 6

Calviղ Thanks. I honestly thoughts they same

Answer 7

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.