justify-content和align-items在使用dispaly时无法正常工作：flex

Question

我想在页面中心显示我的容器。为此，我在CSS中使用了flex。

我将代码放在下面：

* {
  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>

我使用了display: flex; justify-content: center; align-items: center;。但是使用此功能后，容器现在将显示在页面顶部和中间

但是我希望容器在水平和垂直方向上都位于页面的中心。

Answer 1

方法：

• 将HTML，正文和容器div的高度设置为100％。

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>

Answer 2

只要给个身高：100％

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