如何在Bootstrap 4中居中这个表格？

Question

HTML

<div class="container-fluid background">
<div class="row">
    <!-- background effect -->
    <div id="particles-js">
        <div class="login col-12">
            <form class="login-form" method="post" action="">
                <div class="form-group col">
                    <h2 class="login-header">Login</h2>
                </div>
                <div class="col form-group">
                    <input type="text" name="username" placeholder="Username" class="username-input">
                </div>
                <div class="col form-group">
                    <input type="password" name="password" placeholder="Password" class="password-input">
                </div>
                <div class="col form-group">
                    <input type="checkbox" name="remember"><span>Remember Me Next Time</span>
                </div>
                <div class="col form-group">
                    <input type="submit" name="login-button" value="GO" class="submit-button">
                </div>
            </form>
        </div>
    </div>
</div>

这是登录页面。我需要在页面中垂直和水平居中显示此表单。我怎样才能做到这一点？

网页

Answer 1

删除所有row和col类，将登录框放在占据整个屏幕的flex容器中（h-100），然后设置使用m-auto：

的边距

html, body { height: 100%; }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<!-- flex container -->
<div class="d-flex h-100">
  <!-- login box -->
  <div class="m-auto">
    <form method="post" action="">
      <div class="form-group">
        <h2 class="login-header">Login</h2>
      </div>
      <div class="form-group">
        <input type="text" name="username" placeholder="Username" class="username-input">
      </div>
      <div class="form-group">
        <input type="password" name="password" placeholder="Password" class="password-input">
      </div>
      <div class="form-group">
        <input type="checkbox" name="remember"><span>Remember Me Next Time</span>
      </div>
      <div class="form-group">
        <input type="submit" name="login-button" value="GO" class="submit-button">
      </div>
    </form>
  </div>

Answer 2

您只需要在行中添加justify-content-center类。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="container-fluid background">
<div class="row justify-content-center">
<!-- background effect -->
<div id="particles-js">
    <div class="login col-12">
        <form class="login-form" method="post" action="">
            <div class="form-group col">
                <h2 class="login-header">Login</h2>
            </div>
            <div class="col form-group">
                <input type="text" name="username" placeholder="Username" class="username-input">
            </div>
            <div class="col form-group">
                <input type="password" name="password" placeholder="Password" class="password-input">
            </div>
            <div class="col form-group">
                <input type="checkbox" name="remember"><span>Remember Me Next Time</span>
            </div>
            <div class="col form-group">
                <input type="submit" name="login-button" value="GO" class="submit-button">
            </div>
        </form>
    </div>
</div>
</div>