如何在屏幕上居中放置表单（在导航栏和页脚之间）

Question

首先，这不是重复的问题。我检查了以前发布的所有与此类问题类似的问题，但没有找到针对此特定情况的任何解决方案。

我正在使用Bootstrap 4 ，这是我的应用程序网址：https://loving-shaw-e78a46.netlify.com/auth/login

（我共享一个URL，因为我不知道如何发布React应用程序的CSS和HTML，代码很大，而且Stack Overflow不允许我发布它因为大小限制） 。

所以我想做的是：

1. 使<main class="container">填充导航栏和页脚之间的所有高度。
2. <div class="form-page">垂直居中。

这是一张图片：

Answer 1

您可以使用flexbox做到这一点：

首先，您必须将div中的所有内容括起来，如下所示：

<div class="d-flex flex-column" style="height: 100vh">
  // header
  // content
  // footer
</div>

100vh代表视图高度。现在，要确保您的内容是页面的大小，请添加flex：1.这是第一个问题的答案。

要居中，请添加justify-content-center和align-items-center。

因此最终结果应如下所示：

<div class="d-flex flex-column" style="height: 100vh">
  // header

  <div class="justify-content-center align-items-center" style="flex: 1">
    // content
  </div>

  // footer
</div>

这也意味着您不必在绝对位置或固定位置下压页脚。

Answer 2

我用过flexbox
我需要覆盖您的一些价值观

#app > div {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* overwrite */
body {
  margin-bottom: 0;
}
footer.cmTXSD  {
  position: relative;
}

注意

margin-bottom覆盖会“删除”您的margin-bottom: 313px; 313像素，就像您没有计算出但通过实验测得的幻数一样。这是CSS中强烈的代码味道。如果需要在CSS中使用幻数，请仔细考虑。

Answer 3

您只需要添加一些CSS代码即可使表单在容器的中心看起来。 请找到以下代码，并将其添加到您的CSS文件中。

     .container {height: calc(100vh - 383px);position: relative;}
     .container .form-page {position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        background: #fff;
        height: 500px;
        width: 500px;
        padding: 15px 30px;}

谢谢。