How to add and center text in bootstrap 5 carousel?

Question

Layout

I tried to add display: block; for class carousel-item; in CSS. And added text-center to the class itself. Did not help.
Here is the empty carousel I am using.

<section class="slider">
    <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="/assets/images/slider-1.png" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
          <img src="/assets/images/slider-2.jpg" class="d-block w-100" alt="...">
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls"
        data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Предыдущий</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls"
        data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Следующий</span>
      </button>
    </div>
  </section>```

Answer 1

In general, absolutely any html can be inside the carousel-item, including those with a rather complex structure, so the question is a bit strange... Draw blocks of any desired configuration inside the slide.