Bootstrap 轮播中的垂直居中文本

Question

我无法在 Bootstrap 4 中创建文本水平和垂直居中的轮播。

我用轮播创建了 bootply ，但文本只是在左上角而不是在屏幕中间。

 <div class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <h1>Text 1</h1>
    </div>
    <div class="carousel-item">
      <h1>Text 2</h1>
    </div>
    <div class="carousel-item">
      <h1>Text 3</h1>
    </div>´
  </div>
</div>

原文由 Jamgreen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 Bootstrap 4 实用程序类（ 不需要额外的 CSS ）…

https://www.codeply.com/go/ORkdymGWzM

 <div class="carousel slide" data-ride="carousel">
    <div class="carousel-inner text-center">
        <div class="carousel-item active">
            <div class="d-flex h-100 align-items-center justify-content-center">
                <h1>Text 1</h1>
            </div>
        </div>
        <div class="carousel-item">
            <div class="d-flex h-100 align-items-center justify-content-center">
                <h1>Text 2</h1>
            </div>
        </div>
        <div class="carousel-item">
            <div class="d-flex h-100 align-items-center justify-content-center">
                <h1>Text 3</h1>
            </div>
        </div>
    </div>
</div>

原文由 Zim 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

只是你错过了这个：

 <div class="carousel-caption">

在 <h1>Text 1</h1> 之前是这样的：

 <div class="carousel-item active">
  <div class="carousel-caption">
    <h1>Text 1</h1>
  </div>
</div>

原文由 Asjon 发布，翻译遵循 CC BY-SA 3.0 许可协议