我可以使用100％高度而不是100vh的弹性垂直居中吗？

Question

我想将div放在身体中心。如果我将100％改为100vh，它就可以工作。我想避免使用100vh，因为我希望这些规则可以在容器中使用。为什么100％扩展背景的高度，而不是为了垂直居中div？

＆＃13;

＆＃13;

head + * {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #cb9800;
  height: 100%;
}

.content {
  font-family: Comic Sans MS;
  font-size: 75%;
}

＆＃13;

<div class="content">This is vertically centered if I change 100% to 100vh</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

html, head + * {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #cb9800;
  height: 100%;
}

.content {
  font-family: Comic Sans MS;
  font-size: 75%;
}

<div class="content">This is vertically centered if I change 100% to 100vh</div>

    height: 100%;

您还需要将高度100％添加到HTML标记。

Answer 2

添加

html, body{
    height:100%;
    }