How to center to the screen a div content with Bootstrap 4

Question

I'm using Bootstrap 4 and I would like to center container content, which means it showing exactly on the center of the screen. However, my content is still stuck on the top side, even if height is 100% and I use justify-content-center align-items-center

Image:

<!doctype html>
<html lang="en" class="h-100">

<head>
  ...
</head>

<body class="h-100">

  <header>
    ...
  </header>

  <main class="h-100">

    <div class="container h-100">

      <div class="row justify-content-center align-items-center">
        <div class="col">

          <!-- Title -->
          <div class="row text-center">
            <div id="title" class="w-100 mt-5">
              <h1>Let's Find You a Great Apartment.</h1>
            </div>
          </div>

          <!-- Subtitle -->
          <div class="row text-center">
            <div id="subtitle" class="w-100">
              <h2><small>Join more than 5,828,476 happy renters searching 1,025,792 local apartments.</small></h2>
            </div>
          </div>

          <!-- Search box -->
          <div class="row w-100 align-items-center">
            <div id="search" class="enterALocationSearchBox mt-2">
              <input type="text" class="w-100" placeholder="Enter a Location here">
            </div>
          </div>
        </div>
      </div>

    </div>

  </main>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous" />

</body>

</html>

I actually read all those. I forgot one **h-100** and now everything works. — Giovarco, Mar 11 '18 at 13:41

BT101 · Answer 1 · 2018-03-11T13:44:10.750

You don't even need bootstrap for that.

You can use position: relative for parent div and position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); for child then the child will be in middle of parent. But remember to set parent height and width to correct value.

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

More info about css centering here

If you insist on using bootstrap for that, you need to specify height of parent div to make vertical centering working.

How to center to the screen a div content with Bootstrap 4

1 Answers1