justify-content and align-items is not working properly on using dispaly: flex

Question

I want to display my Container in the center of the page. For that, I used flex in CSS.

I am putting the code below:

* {
  background-color: #653706;
}

.nav {
  padding: 10px;
}

input {
  background-color: #fff;
}

.fex {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="fex">
  <input type="text" placeholder="enter your name" class="nav" />
</div>

I used display: flex; justify-content: center; align-items: center;. But after using this, right now container display on the top of the page and in the center

But I want the container into the center of the page both horizontally and vertically.

Answer 1

Approach :

• Give height 100% to html, body and the container div.

html,
body {
  height: 100%;
  margin: 0;
}

* {
  background-color: #653706;
}

.nav {
  padding: 10px;
}

input {
  background-color: #fff;
}

.fex {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}

<div class="fex">
  <input type="text" placeholder="enter your name" class="nav" />
</div>