How to center this form in Bootstrap 4? [duplicate

问题:

This question already has an answer here:

• Align the form to the center in Bootstrap 4 3 answers

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>

This is the login page. I need to center this form in the page both vertically and horizontally. How can I achieve this?

Page

回答1:

Get rid of all the row and col classes, drop the login box in a flex container that takes up the entire screen (h-100), and set the margins using 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>

回答2:

You just need to add justify-content-center class to the row.

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