如何在Bootstrap 5轮播中实现文本Div全屏幕垂直居中？

需要实现Bootstrap 5轮播内的文本Div在大屏及移动端（小屏幕）均垂直居中对齐，当前相关代码如下：

现有CSS代码 #

#hero .carousel-container {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: absolute;
    bottom: 60px;
    top: 110px;
    left: 50px;
    right: 50px;
}

轮播HTML结构 #

<section id="hero">
    <div id="heroCarousel" data-bs-interval="5000" class="carousel slide carousel-fade pointer-event" data-bs-ride="carousel">

      <div class="carousel-inner" role="listbox">

        <!-- Slide 1 -->
        <div class="carousel-item active" style="background-image: url(assets/img/slide/slide-1.jpg);">
          <div class="carousel-container">
            <div class="carousel-content animate__animated animate__fadeInUp">
              <h2>Welcome to <span>Flattern</span></h2>
              <p>Ut velit est quam dolor ad a aliquid qui aliquid. Sequi ea ut et est quaerat sequi nihil ut aliquam. Occaecati alias dolorem mollitia ut. Similique ea voluptatem. Esse doloremque accusamus repellendus deleniti vel. Minus et tempore modi architecto.</p>
              <div class="text-center"><a href="" class="btn-get-started">Read More</a></div>
            </div>
          </div>
        </div>

        <!-- Slide 2 -->
        <div class="carousel-item" style="background-image: url(assets/img/slide/slide-2.jpg);">
          <div class="carousel-container">
            <div class="carousel-content animate__animated animate__fadeInUp">
              <h2>Lorem Ipsum Dolor</h2>
              <p>Ut velit est quam dolor ad a aliquid qui aliquid. Sequi ea ut et est quaerat sequi nihil ut aliquam. Occaecati alias dolorem mollitia ut. Similique ea voluptatem. Esse doloremque accusamus repellendus deleniti vel. Minus et tempore modi architecto.</p>
              <div class="text-center"><a href="" class="btn-get-started">Read More</a></div>
            </div>
          </div>
        </div>

        <!-- Slide 3 -->
        <div class="carousel-item" style="background-image: url(assets/img/slide/slide-3.jpg);">
          <div class="carousel-container">
            <div class="carousel-content animate__animated animate__fadeInUp">
              <h2>Sequi ea ut et est quaerat</h2>
              <p>Ut velit est quam dolor ad a aliquid qui aliquid. Sequi ea ut et est quaerat sequi nihil ut aliquam. Occaecati alias dolorem mollitia ut. Similique ea voluptatem. Esse doloremque accusamus repellendus deleniti vel. Minus et tempore modi architecto.</p>
              <div class="text-center"><a href="" class="btn-get-started">Read More</a></div>
            </div>
          </div>
        </div>

      </div>

      <a class="carousel-control-prev" href="#heroCarousel" role="button" data-bs-slide="prev">
        <span class="carousel-control-prev-icon bx bx-left-arrow" aria-hidden="true"></span>
      </a>

      <a class="carousel-control-next" href="#heroCarousel" role="button" data-bs-slide="next">
        <span class="carousel-control-next-icon bx bx-right-arrow" aria-hidden="true"></span>
      </a>

      <ol class="carousel-indicators" id="hero-carousel-indicators"><li data-bs-target="#heroCarousel" data-bs-slide-to="0" class="active"></li><li data-bs-target="#heroCarousel" data-bs-slide-to="1"></li><li data-bs-target="#heroCarousel" data-bs-slide-to="2"></li></ol>

    </div>
  </section>

此前尝试移除#hero .carousel-container的position: absolute属性，并为父元素carousel-item添加align-items-center类，但未达到预期效果。

要实现全尺寸垂直居中，需要调整carousel-item和carousel-container的样式，具体修改如下：

1. 修改.carousel-item的基础样式 #

首先确保每个轮播项占据全屏高度，并启用Flex布局来控制内部元素的垂直对齐：

#hero .carousel-item {
    min-height: 100vh; /* 确保轮播项占满视口高度 */
    display: flex;
    align-items: center; /* 垂直居中内部元素 */
    justify-content: center; /* 水平居中内部元素 */
}

2. 调整.carousel-container的样式 #

移除原有的绝对定位和上下边距，让它依托父级Flex布局实现居中：

#hero .carousel-container {
    display: flex;
    align-items: center; /* 垂直居中内部文本容器 */
    justify-content: center;
    position: static; /* 取消绝对定位 */
    /* 移除原有的top/bottom/left/right属性 */
    width: 100%;
    max-width: 800px; /* 可选：限制内容最大宽度，避免大屏上文本过宽 */
    padding: 0 20px; /* 移动端添加左右内边距，防止贴边 */
}

3. 确保.carousel-content自适应（可选） #

如果需要文本容器内部也保持布局协调，可以添加：

#hero .carousel-content {
    text-align: center; /* 文本水平居中 */
    width: 100%;
}

失效原因说明 #

原代码中carousel-item未设置高度（min-height: 100vh），也未启用Flex布局，导致align-items-center属性无法生效；同时carousel-container的绝对定位脱离了文档流，不受父级布局控制，最终导致居中失效。

内容的提问来源于stack exchange，提问作者Loki