2. 利用Bootstrap内置标题（Captions）功能

Bootstrap为轮播图提供了专门的.carousel-caption类，用于在图片上方叠加标题和描述文本。这个容器通常包含一个

或

标签作为标题，以及一个

标签作为描述。

Supercreator

AI视频创作编辑器，几分钟内从构思到创作。

下载

将.carousel-caption添加到每个.carousel-item内部，紧跟在标签之后。为了在小屏幕上隐藏标题以优化显示，我们通常会结合使用响应式工具类，例如d-none d-md-block，表示在小屏幕上隐藏（d-none），但在中等屏幕（md）及以上显示（d-md-block）。

<section>
    <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
            @@##@@
            <div class="carousel-caption d-none d-md-block"> <!-- 添加标题容器 -->
              <h1>精彩标题一</h1>
              <p>这是关于图片一的简短描述，旨在吸引用户的注意力。</p>
            </div>
          </div>
          <div class="carousel-item">
            @@##@@
            <div class="carousel-caption d-none d-md-block">
              <h1>第二张图的主题</h1>
              <p>在这里，您可以放置任何您想要展示的文本内容。</p>
            </div>
          </div>
          <div class="carousel-item">
            @@##@@
            <div class="carousel-caption d-none d-md-block">
              <h1>第三个轮播项</h1>
              <p>轮播图标题和文本的完美结合。</p>
            </div>
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
    </div>
</section>

此时，文本已经能够叠加在图片上方，但默认情况下，它们可能位于图片的底部，并且不一定完全居中。为了实现精确的居中效果，我们需要自定义CSS样式。

3. 自定义CSS实现文本精确居中

要将.carousel-caption中的文本内容精确地垂直和水平居中，我们需要覆盖或添加一些CSS属性。关键在于利用position: absolute进行定位，并通过top、left、right以及transform属性来实现居中。

/* 自定义样式 */
.carousel-caption {
  position: absolute; /* 确保内容相对于父元素定位 */
  right: 15%; /* 定义标题容器的右侧偏移 */
  left: 15%;  /* 定义标题容器的左侧偏移，与right: 15% 共同确定宽度 */
  top: 50%;   /* 垂直居中的起始点，将容器顶部定位到父元素垂直中心 */
  transform: translateY(-50%); /* 向上移动自身高度的50%，实现精确垂直居中 */
  z-index: 10; /* 确保文本在图片上方显示 */
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff; /* 文本颜色，确保与背景图片有良好对比度 */
  text-align: center; /* 文本内容在容器内水平居中 */

  /* 可选：增加背景半透明色块和文本阴影以提高可读性 */
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
}

/* 调整标题和段落的样式 */
.carousel-caption h1 {
    font-size: 3rem; /* 示例字体大小 */
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0,