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>

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>

Answer 2

您可以使用display: table;和display: table-cell;与vertical-align: middle;

一起显示

.carousel-item {
    display: table;
    text-align: center;
}

.carousel-item h1 {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

此处的关键是vertical-align: middle;，仅当div是表格时才有效。

关于水平对齐，text-align: center;转到.carousel-item。我更新了我的代码。

Answer 3

将h1的CSS更改为以下内容：

.carousel-item h1 {
  position: absolute;
  margin: 0;
  color: white;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

Answer 4

只是你错过了这个：

<div class="carousel-caption">

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

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

在Bootstrap轮播中垂直居中文本

4 个答案: