h1 not aligning to center without enough text underneath

Question

My h1 only aligns to the center of the screen if it has enough text underneath it. Otherwise, it will align wrong/not at all. How do I fix this?

.content {
  margin-top: 60px;
  text-align: center;
}

body {
  background-color: #a8a8a8;
}

.textbox {
  background-color: white;
  padding: 20px 100px 100px 100px;
}

<div class="container textbox">
  <div class="row">
    <div class="col-xs-12 content">
      <h1>Contact</h1>
    </div>
  </div>
</div>

Here are my screenshots of what happens in each situation I mentioned:

No text underneath the h1

A bit of text underneath the h1

Enough text underneath the h1 (the h1 finally aligns properly)

Answer 1

There's absolutely no need for any custom css for simple things of this nature in Bootstrap 4. The text-center class is what you want for your h1.

Also, the col-xs-* class doesn't exist in Bootstrap 4 anymore. It's just col-* now.

Here's a working example:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col">
            <h1 class="text-center">Contact</h1>
            <p>Lorem ipsum dolor sit amet, consectetur.</p>
        </div>
    </div>
</div>