如何使用 Bootstrap 5 让 Div 部分浮动到另一个 Div 的底部（或中心）答案

【问题标题】：How to get a Div section to Float to the bottom (or center) of another Div using Bootstrap 5如何使用 Bootstrap 5 让 Div 部分浮动到另一个 Div 的底部（或中心）
【发布时间】：2021-09-16 12:37:33
【问题描述】：

我在将标题和 CTA 按钮移动到主图像 div 的底部（或中心）时遇到了极大的挑战，我使用的是最新的 bootstrap 5.1，并且尝试了各种 d-flex 方法均无济于事。这是我的jsfiddle 和下面的代码。

非常感谢您的帮助！

<div
  class="d-flex align-items-stretch mb-3 rounded shadow text-center bg-image img-fluid"
  style="
      background-image: url('https://mdbcdn.b-cdn.net/img/new/slides/041.jpg');
      height: 400px;
      background-repeat: no-repeat;
      background-size: cover;
      margin-top: -1rem !important;">

  <div class="mask w-100" style="background-color: rgba(0, 0, 0, 0.6);">
    <div class="d-flex justify-content-center">
  <!-- This section needs to go to the bottom -->
      <div class="py-4 text-white">
        <h1 class="mb-3">Welcome to the Tool Center!</h1>
        <a class="btn btn-outline-light btn-lg" href="{{site.url}}/puppies" role="button">See our Newest Tools!</a>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-5

【解决方案1】：

尝试使用class=mask w-100 将d-flex align-items-center justify-content-center 设置为div。那么它下面的 div 就变得多余了。

【讨论】：