Bootstrap carousel is not working properly - css

Question

I am trying to use Bootstrap carousel in my website but I am not able to center the content in the carousel. I've tried using Grid but that didn't work out well. How can I solve this problem? Please take a look at my code and the image that has been provided below. I haven't used any CSS yet for the carousel.
<section class="services-about">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- The slideshow -->
<div class="carousel-inner">
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="card-columns">
<div class="card card-effects">
<img src="./resources/images/data.png" alt="" class="img-fluid card-img-top mx-5"
style="height: 10%; width: 15%;">
<div class="card-body">
<h3 class="card-title text-center" style="color: #686868 !important;">
WEB DEVELOPMENT
</h3>
<hr style="border: .01px solid #333 !important;">
<p class="card-text text-center"
style="color: rgba(255,255,255,.755) !important;">Lorem
ipsu dolor sit amet consectetur adipisicing
elit.
Consequatur perspiciatis quas exercitationem natus? Magnam molestiae
unde
praesentium, quidem soluta incidunt enim dolore veritatis at quis
molestias
corporis
quod inventore porro!</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card-columns">
<div class="card card-effects">
<img src="" alt="" class="img-fluid card-img-top">
<div class="card-body">
<h3 class="card-title text-center" style="color: #686868 !important;">
MARKETING</h3>
<hr style="border: .01px solid #333 !important;">
<p class="card-text text-center"
style="color: rgba(255,255,255,.755) !important;">
Lorem
ipsum dolor sit amet consectetur adipisicing
elit.
Consequatur perspiciatis quas exercitationem natus? Magnam molestiae
unde
praesentium, quidem soluta incidunt enim dolore veritatis at quis
molestias
corporis
quod inventore porro!</p>
</div>
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<div class="carousel-item">
</div>
<div class="carousel-item">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</section>
Please check this image to see the carousel problem

Answer 1

You should be able to use position to do that.
If you add:
.carousel-item {
position: relative;
}
.card {
position: absolute;
left: 50%;
top: 50%;
transform: translate(50%, 50%);
}
Your content should get centered in the middle of the slide. :)

Answer 2

Try the below one.. add style="margin:auto" to card
<div class="card" style="width:400px; margin:auto;">
<div class="carousel-caption">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
See Profile
</div>
</div>
</div>

Answer 3

Since you are using bootstrap classes:
Trying using d-flex justify-content-center align-items-center on parent div element.
Also, I strongly suggest you stop using css inline styling and put your css into a separate file.