How can I align 3 divs in the middle of the page? - html

Question

I need help to align 3 divs in the middle of the page. I managed them to be aligned horizontally but I can't put them in the middle. I tried but the middle one just go into the third one when I fill the div with something.
https://imgur.com/a/ceNyoHg
Here's the HTML code(I'm using bootstrap):
<div class="container">
<div class="row">
<div class="col">
<div class="card" style="width: 18rem;">
<img src="/pfp.jpg" class="card-img-top" alt="...">
<ul class="list-group list-group-flush">
<li class="list-group-item">Name: </li>
<li class="list-group-item">Age: </li>
</ul>
<div id="desc" class="card-body">
<h5 class="card-title"></h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div id="middle" class="col">
Colegiul National "Nicolae Titulescu"
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/cnntcarousel1.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="/cnntcarousel2.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="/cnntcarousel3.png" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<div class="col">
<div class="card" style="width: 18rem;">
<img src="/pfp.jpg" class="card-img-top" alt="...">
<ul class="list-group list-group-flush">
<li class="list-group-item">Name: </li>
<li class="list-group-item">Age: </li>
</ul>
<div id="desc" class="card-body">
<h5 class="card-title"></h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
And here is the CSS code I'm using:
.container {
position: absolute;
top: 40%;
left: auto;
font-family: Lemon Milk;
/*background-color: rgba(255, 255, 255, .4)*/}
#middle {
text-align: center;
color: white;}
I'm using position: absolute; because I have a background image on the page body.

Answer 1

The simplest and flexible way is using flex. Read more help here