Flex Justify Content isn't working both Vertical and Horizontal way

Question

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

Answer 1

First of all, it's justify-content, not justify-itemsas you wrote.

And in your particular example, the input field and the words won't fit into 50x50px, so that's kind of unrealistic. Use a realistic size (width) and maybe also add text-align: center; if you want to center the text and button within those elements:

* {
  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: 200px;
  height: 50px;
  text-align: center;
}

section{
  max-width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: grey;
  justify-content: center;
  align-items: center;
}

<div id=root>
  <section>
    <h1>Lista Tarefas</h1>
    <form>
      <input type="text" />
      <button type=" submit ">Enviar</button>
    </form>
  </section>
</div>