h1 没有对齐到中心，下面没有足够的文字答案

【问题标题】：h1 not aligning to center without enough text underneathh1 没有对齐到中心，下面没有足够的文字
【发布时间】：2018-01-18 05:18:56
【问题描述】：

我的h1 只有在其下方有足够的文本时才会与屏幕中心对齐。否则，它将对齐错误/根本不对齐。我该如何解决这个问题？

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

以下是我提到的每种情况的屏幕截图：

No text underneath the h1

A bit of text underneath the h1

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

【问题讨论】：

用额外的文本显示您的标记，以便我们知道您在做什么。
什么浏览器？在 IE11 中对我来说很好； <h1> 即使下面没有文字也会对齐。

标签： html css alignment bootstrap-4

【解决方案1】：

在 Bootstrap 4 中，对于这种性质的简单事物，绝对不需要任何自定义 css。text-center 类是您想要的 h1。

此外，col-xs-* 类不再存在于 Bootstrap 4 中。现在只是col-*。

这是一个工作示例：

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

【讨论】：

谢谢，我以后会用到这些技巧；）