垂直对齐中心卡引导程序

Question

我正在尝试将注册表格在顶部和底部均居中，如下所示：

我尝试使用vertical-align和其他bootstrap元素，但无法实现这一点。当您想使元素垂直居中时，您会考虑使用Bootstrap提供的Vertical Align实用程序，该工具仅适用于内联元素，但是如果您想使元素在其父容器内垂直居中怎么办？

到目前为止，这是我的代码：

body {
  font-family: 'Kulim Park', sans-serif;
}

header {
  background-color: #1c1b28;
  padding: 0.5em 0 0.6em 0;
}

.navbar a {
  color: #fff;
  font-size: 1.1em;
}

span.navbar-toggler-icon {
  color: #fff !important;
}

footer {
  background-color: #1c1b28;
  padding: 1em 0 0.3em 0;
  width: 100%;
  position: fixed;
  bottom: 0px;
}

footer p {
  color: #e2e2e2;
  font-size: 1em;
}

.registration {
  padding: 6em 0;
}

label {
  font-weight: bold;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <nav class="navbar navbar-expand-lg">
        <a class="navbar-brand" href="#"></a> <button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarSupportedContent" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item border-button">
              <a class="nav-link" data-target="#login-modal" data-toggle="modal" href="#">Login</a>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  </div>
</div>
</header>

<section class="registration">
  <div class="container">
    <div class="row">
      <div class="col-lg-7 mx-auto vertical-align">
        <div class="card">
          <div class="card-header">
            <h2 class="display-5 main-text-blue text-center font-weight-bold">Register</h2>
          </div>
          <div class="card-body">
            <form>
              <div class="form-group">
                <label for="full name">Full Name:</label>
                <input type="text" class="form-control" id="full_name" placeholder="Your Name..">
              </div>

              <div class="form-group">
                <label for="full name">Email:</label>
                <input type="email" class="form-control" id="email" placeholder="Your Email..">
              </div>

              <div class="form-group">
                <label for="full name">Password:</label>
                <input type="password" class="form-control" id="password" placeholder="Your Password..">
              </div>

              <div class="form-group">
                <label for="full name">Verify Password:</label>
                <input type="password" class="form-control" id="verify_password" placeholder="Verify Your Password..">
              </div>

              <button type="submit" class="btn btn-primary btn-lg main-btn mb-2">Register</button>

            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<footer>
  <p class="text-center">© Copyright. All Rights Reserved.</p>
</footer>

如何使用bootstrap或CSS实现此目标？

Answer 1

body {
  font-family: 'Kulim Park', sans-serif;
}

section.registration {
  display: table;
  width: 100%;
  height: 100vh;
}

section.registration .container {
  display: table-cell;
  vertical-align: middle;
}

.col-lg-7.mx-auto.vertical-align {
  max-width: 500px !important;
  margin: 0 auto;
}

.registration {
  padding: 6em 0;
}

label {
  font-weight: bold;
}

<section class="registration">
  <div class="container">
    <div class="row">
      <div class="col-lg-7 mx-auto vertical-align">
        <div class="card">
          <div class="card-header">
            <h2 class="display-5 main-text-blue text-center font-weight-bold">Register</h2>
          </div>
          <div class="card-body">
            <form>
              <div class="form-group">
                <label for="full name">Full Name:</label>
                <input type="text" class="form-control" id="full_name" placeholder="Your Name..">
              </div>

              <div class="form-group">
                <label for="full name">Email:</label>
                <input type="email" class="form-control" id="email" placeholder="Your Email..">
              </div>

              <div class="form-group">
                <label for="full name">Password:</label>
                <input type="password" class="form-control" id="password" placeholder="Your Password..">
              </div>

              <div class="form-group">
                <label for="full name">Verify Password:</label>
                <input type="password" class="form-control" id="verify_password" placeholder="Verify Your Password..">
              </div>

              <button type="submit" class="btn btn-primary btn-lg main-btn mb-2">Register</button>

            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>