Bootstrap 4 - 如何正确居中 Div（表单）？

Question

我刚刚开始使用 Bootstrap，在让表单显示在页面中央时遇到了一些问题。到目前为止，我所做的是使用 CSS-样式来确保 html 和 body 标签都处于 100% 高度。然后我有两个divs：外面的div使用页面的整个高度，并使用"justify-content-center." 内部的div使用"align-items-center." 有了这个，我已经设法让表格显示在中心。但是，我留下了这个在表单顶部和底部延伸的空白。

这是一个有点模糊的问题，但是我有没有办法删除那个空格（比如缩小容器之类的东西），或者也许着手 div 一个不同的居中方式？

我正在为我的视图模板引擎使用 jade/pug。这是源代码：


block content
  div(class="row h-100 justify-content-center")
    div(class="d-flex align-items-center shadow-lg p-3 mb-5 bg-white rounded")
      div
        h3(class="text-center") Submit Your Attendance
        form
          div(class="form-group")
            label(for="firstname") First Name
            input(class="form-control", type="text", id="firstname", placeholder="John", name="firstname")
          div(class="form-group")
            label(for="lastname") Last Name
            input(class="form-control", type="text", id="lastname", placeholder="Doe", name="lastname")
          div(class="form-group")
            label(for="email") Email Address
            input(class="form-control", type="text", id="email", placeholder="johndoe@email.com", name="email")
          div(class="text-center")
            button(class="btn btn-primary", type="submit") Submit

这是它继承自的layout.jade：

doctype html
html(style="height:100%")
  head
    title= title
    link(rel='stylesheet', href='/node_modules/bootstrap/dist/css/bootstrap.min.css')
    script(src="/../node_modules/jquery/jquery.min.js")
    script(src="/../node_modules/popper.js/dist/umd/popper.min.js")
    script(src="/../node_modules/bootstrap/dist/js/bootstrap.min.js")
  body(style="height:100%;background-image:url(../public/images/index-background.jpg);")
    block content

页面如下所示： screenshot of the page

如有任何建议，我们将不胜感激，非常感谢！

Answer 1

只需添加 align-items-center class 和行 class。

block content
  div(class="row h-100 justify-content-center align-items-center") /*add align-items-center here*/
    div(class="d-flex flex-column align-items-center shadow-lg p-3 mb-5 bg-white rounded")
      div
        h3(class="text-center") Submit Your Attendance
        form
          div(class="form-group")
            label(for="firstname") First Name
            input(class="form-control", type="text", id="firstname", placeholder="John", name="firstname")
          div(class="form-group")
            label(for="lastname") Last Name
            input(class="form-control", type="text", id="lastname", placeholder="Doe", name="lastname")
          div(class="form-group")
            label(for="email") Email Address
            input(class="form-control", type="text", id="email", placeholder="johndoe@email.com", name="email")
          div(class="text-center")
            button(class="btn btn-primary", type="submit") Submit

只是我把哈巴狗 html 变成了正常的它工作正常。

演示：

<!DOCTYPE html>
<html lang="en" style="height:100%;">

<head>
  <title>Bootstrap Example</title>
  <meta charset=" utf-8 ">
  <meta name="viewport " content="width=device-width, initial-scale=1 ">
  <link rel="stylesheet " href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css ">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js "></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js "></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js "></script>
</head>

<body style="height:100% ">
  <div class="row h-100 justify-content-center align-items-center ">

    <div class="d-flex flex-column align-items-center shadow-lg p-3 mb-5 bg-white rounded ">
      <h3 class="text-center ">Submit Your Attendance form
      </h3>
      <form>
        <div class="form-group ">
          <label for="firstname ">First Name</label>
          <input class="form-control " type="text " id="firstname " , placeholder="John " name="firstname "><br>
        </div>
        <div class="form-group ">
          <label for="lastname ">Last Name</label>
          <input class="form-control " type="text " id="firstname " , placeholder="John " name="firstname "><br> </div>
        <div class="form-group ">
          <label for="email ">Email</label>
          <input class="form-control " type="text " id="email " placeholder="johndoe@email.com " name="email "><br>
        </div>
        <div class="text-center ">
          <button type="submit " value="Submit ">submit</button>
        </div>
      </form>
    </div>
  </div>
</body>

</html>

Bootstrap 4 - 如何正确居中 Div（表单）？

Bootstrap 4 - How To Properly Center a Div (Form)?

css

bootstrap-4

pug