enter code hereMy body height is 100%, Html height is 100%, root height 100%, and this section is 100%
section{ max-width: 50%; height: 100%; display: flex; flex-direction: column; background-color: grey; justify-items: center; align-items: center;}
Inside this section, i put a h1 and a form, and i limited it to 50px to test why isnt vertical aligning
* { margin: 0; padding: 0; box-sizing: border-box;}html { font-size: 62.5%; height: 100%;}body { font: 1.6rem arial, sans-serif; height: 100%;}#root { height: 100%;}h1,form { width: 50px; height: 50px;}section{ max-width: 50%; height: 100%; display: flex; flex-direction: column; background-color: grey; justify-items: center; align-items: center;}<div id=root><section><h1>Lista Tarefas</h1><form><input type="text" /><button type=" submit ">Enviar</button></form></section></div>But, if i remove the flex-direction: column; , there is vertical alignment but not the horizontal alignment