Vertical center of text in Bootstrap carousel

Question

I'm having trouble creating a carousel in Bootstrap 4 with text centered both horizontally and vertically.

I created bootply with a carousel, but the text is only in the upper left corner, and not in the middle of the screen.

<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

You can use Bootstrap 4 utility classes ( no extra CSS required ) ...

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

You can use mapping display: table;and display: table-cell;together withvertical-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

Change your CSS to h1the following:

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

Answer 4

You just miss this:

<div class="carousel-caption">

Before <h1>Text 1</h1> So like this:

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