如何在引导程序中将div中的内容与外部内容对齐？

Question

所以我有此部分，它占据了屏幕的整个宽度，但其中的文本包含在一个容器中并正确对齐。

下面的那一部分被分为两列，我感兴趣的是将文本放在与上面的文本对齐的左栏中，但是到目前为止，这还没有做到。

这是我得到的结果：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<section id="">
  <div class="d-flex align-items-center bg-primary" style="min-height: 450px">
    <div class="container">
      <h1 class="">TITLE TEXT</h1>
    </div>
  </div>
</section>

<section id="">
  <div class="subhead bg-primary">
    <div class="row">
      <div class="col-sm bg-secondary" style="min-height: 400px">
        <div class="container">
          <h3>TITLE</h3>
        </div>
      </div>
      <div class="col-sm bg-warning" style="min-height: 400px"></div>
    </div>
  </div>
</section>

和我目前使用的HTML（css刚刚添加到HTML中进行测试）

感谢您提供的任何帮助，如果您需要更多帮助，请告诉我。

Answer 1

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<section id="">
  <div class="row bg-primary" style="min-height: 450px">
    <div class="col-6 d-flex align-items-center">
      <div class="container">
        <h1 class="text-center">TITLE TEXT</h1>
      </div>
    </div>
  </div>
</section>
<section id="">
  <div class="subhead bg-primary">
    <div class="row" style="min-height: 400px">
      <div class="col-6 d-flex align-items-center bg-secondary">
        <div class="container">
        <h3 class="text-center">TITLE</h3>
      </div>
    </div>
    <div class="col-6 bg-warning"></div>
    </div>
  </div>
</section>

Answer 2

.text-to-center{ display:flex}
h1,h3{ margin:auto;}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<section id="">
  <div class="row bg-primary" style="min-height: 450px">
    <div class="col-12 d-flex align-items-center">
      <div class="container text-to-center">
      
        <h1 class="text-center">TITLE TEXT</h1>
      </div>
    </div>
  </div>
</section>
<section id="">
  <div class="subhead bg-primary">
    <div class="row" style="min-height: 400px">
      <div class="col-6 d-flex align-items-center bg-secondary">
        <div class="container text-to-center">
        <h3 class="text-center">TITLE</h3>
      </div>
    </div>
    <div class="col-6 bg-warning"></div>
    </div>
  </div>
</section>