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

首先，这不是一个重复的问题。我检查了之前发布的所有类似于这类问题的问题，没有找到任何解决方案

我正在使用，以下是我的应用程序URL：

（我共享一个URL，因为我不知道如何发布React应用程序的CSS和HTML，代码非常庞大，由于大小限制，堆栈溢出不允许我发布）

所以我想做的是：

使

填充导航栏和页脚之间的所有高度

垂直居中

这是一张图片：

---

您可以使用flexbox执行此操作：

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

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

//标题
//内容
//页脚

100vh表示视图高度。现在，为了确保您的内容与页面大小相同，请添加flex:1。这就是你第一个问题的答案

要使其居中，请添加“对齐资源中心”和“对齐项目中心”

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

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

//标题
//内容
//页脚

---

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

您可以使用flexbox：

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

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

//标题
//内容
//页脚

100vh表示视图高度。现在，为了确保您的内容与页面大小相同，请添加flex:1。这就是你第一个问题的答案

要使其居中，请添加“对齐资源中心”和“对齐项目中心”

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

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

//标题
//内容
//页脚

---

这也意味着您不必使用position absolute或fixed强制页脚向下移动。

您只需添加一些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;}

---

谢谢。

您只需要添加一些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;}

谢谢。

我用的是flexbox
我需要覆盖你的一些值

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

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

注

页边距底部

覆盖“删除”您的

页边距底部：313px313px就像一个神奇的数字，你们并没有计算，而是通过实验来测量。这在CSS中是一种强烈的代码味道。如果您需要在CSS中使用幻数，请仔细考虑。
我使用了flexbox

我需要覆盖你的一些值

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

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

注
页边距底部
覆盖“删除”您的
页边距底部：313px313px就像一个神奇的数字，你们并没有计算，而是通过实验来测量。这在CSS中是一种强烈的代码味道。如果你需要在CSS中使用魔法数字，请仔细考虑。
请不要否决这个问题，我很抱歉不能发布CSS和HTML，我正在使用
React
+
样式化组件
，老实说，我不知道如何获得样式。在发布这个问题之前，我读了很多关于CSS Flexbox的文章，但是我没能做到。请不要否决这个问题，我很抱歉不能发布CSS和HTML，我正在使用
React
+
样式化组件
，老实说，我不知道如何获得样式。在发布这个问题之前，我读了很多关于CSS Flexbox的文章，但是我没能做到。太棒了，谢谢你。
margin bottom:313px
aka the magic number这是一种让页脚“粘”到底的方法哈哈。这是一个。哦，d***d引导：粘性页脚很简单：哇，你就是那个人。太棒了，谢谢你。
margin-bottom:313px
aka神奇数字这是一个让页脚“粘性”到底的方法哈哈。这是一个。哦，那个d***d引导：粘脚很简单：哇，你就是那个人。谢谢tom，你在技术上是对的，但它与我在问题中提供的代码完全不起作用。谢谢tom，你在技术上是对的，但与我在问题中提供的代码完全不起作用。