Vertically Center Text In Bootstrap Carousel

I have trouble creating a carousel in Bootstrap 4 with text centered both horizontally and vertically. I have created the bootply with a carousel, but the text is just in the upper

Solution 1:

You can use the Bootstrap 4 utility classes (no additional CSS is needed)...

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

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

Solution 2:

Change your CSS for h1 into the following:

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

Solution 3:

Simply you are missing this:

<div class="carousel-caption">

Before the <h1>Text 1</h1> So it's like this:

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

Solution 4:

You can use display: table; and display: table-cell; display along with vertical-align: middle;

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

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

The key here is vertical-align: middle; which works only if a div is a table.

Regarding the horizontal alignment, the text-align: center; goes to .carousel-item. I updated my code.

Solution 5:

use the container. this worked for me.

    <div id="carouselContent"class="carousel slide" data-ride="carousel">

        <divclass="container"><divclass="carousel-inner text-center text-white m-auto"role="listbox"><divclass="carousel-item active text-center p-4"><divclass="user_text mb-3"><pclass="mbr-fonts-style display-7"><strong>
                                Blah
                            </strong><br></p></div></div><divclass="carousel-item text-center p-4"><divclass="user_text mb-3"><pclass="mbr-fonts-style display-7"><strong>
                                Blah Blah

                            </strong><br></p></div></div></div></div><aclass="carousel-control-prev"href="#carouselContent"role="button"data-slide="prev"><spanclass="carousel-control-prev-icon"aria-hidden="true"></span><spanclass="sr-only">Previous</span></a><aclass="carousel-control-next"href="#carouselContent"role="button"data-slide="next"><spanclass="carousel-control-next-icon"aria-hidden="true"></span><spanclass="sr-only">Next</span></a></div>