slider HTML : align text and button in middle slider bootstrap 4 - html

Question

in below code i want to align button,logo and text in center of images slider in bootstrap4 but here in my code it's not showing same on all devices plus i need to change css on every screen and this is a bad way i think... is there a better way to do this ?
thanks in advance
.wrapper {
position: absolute;
bottom: 250px;
left: 18%;
}
#media (min-width:320px) {
.wrapper {
position: absolute;
bottom: 139px;
left: 18%;
}
}
#media (min-width:480px) {
.wrapper {
position: absolute;
bottom: 250px;
left: 18%;
}
}
#media (min-width:801px) {
.wrapper {
position: absolute;
bottom: 280px;
left: 18%;
}
}
<div class="container-fluid main">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item">
<img class="d-block w-100 " src="assets/images/dgWebsiteImages-25.jpg" alt="First Image">
<div class="carousel-caption ">
<img class="" src="https://www.google.com/url?sa=i&url=https%3A%2F%2Fpixabay.com%2Fimages%2Fsearch%2Fnature%2F&psig=AOvVaw2OejUw2y467GfAvPkIg7bK&ust=1667036104481000&source=images&cd=vfe&ved=0CA0QjRxqFwoTCMCZ9srPgvsCFQAAAAAdAAAAABAD" style="background-repeat: no-repeat;"
alt="First Image">
<div class="textslider">
<h2>text text text text text text</h2>
</div>
<div class="wrapper">
<a class="ripple rbutton" href="https://">Visit Website</a>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

Here is the solution
<div
id="carouselExampleIndicators"
class="carousel slide"
data-ride="carousel"
>
<ol class="carousel-indicators">
<li
data-target="#carouselExampleIndicators"
data-slide-to="0"
class="active"
></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img
class="d-block w-100"
src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_184273a4147%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_184273a4147%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9140625%22%20y%3D%22217.7%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
alt="First slide"
/>
<div class="carousel-caption d-none d-md-block">
<img
class=""
src="https://www.google.com/url?sa=i&url=https%3A%2F%2Fpixabay.com%2Fimages%2Fsearch%2Fnature%2F&psig=AOvVaw2OejUw2y467GfAvPkIg7bK&ust=1667036104481000&source=images&cd=vfe&ved=0CA0QjRxqFwoTCMCZ9srPgvsCFQAAAAAdAAAAABAD"
style="background-repeat: no-repeat"
alt="First Image"
/>
<div class="textslider">
<h2>text text text text text text</h2>
</div>
<div class="wrapper">
<a class="ripple rbutton" href="https://">Visit Website</a>
</div>
</div>
</div>
<div class="carousel-item">
<img
class="d-block w-100"
src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_184273a4148%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_184273a4148%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3125%22%20y%3D%22217.7%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
alt="Second slide"
/>
<div class="carousel-caption d-none d-md-block">
<img
class=""
src="https://www.google.com/url?sa=i&url=https%3A%2F%2Fpixabay.com%2Fimages%2Fsearch%2Fnature%2F&psig=AOvVaw2OejUw2y467GfAvPkIg7bK&ust=1667036104481000&source=images&cd=vfe&ved=0CA0QjRxqFwoTCMCZ9srPgvsCFQAAAAAdAAAAABAD"
style="background-repeat: no-repeat"
alt="First Image"
/>
<div class="textslider">
<h2>text text text text text text</h2>
</div>
<div class="wrapper">
<a class="ripple rbutton" href="https://">Visit Website</a>
</div>
</div>
</div>
<div class="carousel-item">
<img
class="d-block w-100"
src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_184273a4148%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_184273a4148%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22276.9921875%22%20y%3D%22217.7%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
alt="Third slide"
/>
<div class="carousel-caption d-none d-md-block">
<img
class=""
src="https://www.google.com/url?sa=i&url=https%3A%2F%2Fpixabay.com%2Fimages%2Fsearch%2Fnature%2F&psig=AOvVaw2OejUw2y467GfAvPkIg7bK&ust=1667036104481000&source=images&cd=vfe&ved=0CA0QjRxqFwoTCMCZ9srPgvsCFQAAAAAdAAAAABAD"
style="background-repeat: no-repeat"
alt="First Image"
/>
<div class="textslider">
<h2>text text text text text text</h2>
</div>
<div class="wrapper">
<a class="ripple rbutton" href="https://">Visit Website</a>
</div>
</div>
</div>
</div>
</div>
Just use this css
div.carousel-caption {
top: 50%;
left: 50%;
bottom: auto;
transform: translate(-50%, -50%);
}