I am currently using bootstrap to design the index page of my website. My goal is to align two divs in the center, one on top of the other. I have a container-fluid and a row with two columns. In one of the columns, I want to align two divs in both horizontal and vertical center (see code below).
Here's an illustration of what I'm trying to achieve: desired layout
In the image, the green represents the container-fluid, the red and blue are the divs I want centered, and the orange is a login form I plan to add later.
This is the current layout structure:
<div class="container-fluid mainwrapper p-2">
<div class="row">
<div class="col">
<div>
<img src="pictures/logooo.png" class="my-2" alt="uc2">
</div>
<div>
<a class="rounded shadow-sm bg-white biorHv px-3">Faculté NTIC | Departement de Scolarité</a>
</div>
</div>
<div class="col">
<!-- Login form here -->
</div>
</div>
</div>
An actual photo of the issue shows that I need the green logo and text with white background to be perfectly aligned in the center of the left column.
See the problem here: actual issue
And this is what I really want to achieve: desired outcome