Aligning 2 DIVs on top on each other in bootstrap - html

Question

So I'm using bootstrap to create an index home page
what I'm trying to do is basically align in the center 2 divs on top of each other :
I have a container-fluid
then a row with 2 cols: in 1 of the cols I have 2 divs that I want to be aligned in the center ( both horizontally and vertically ),
( code is shown below )
here's an illustration :
what I want to do
green is the container-fluid ||
red and blue are the divs I want to be aligned || an orange is a login form I want to add later on
my code goes like this :
<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>
here's a real picture of the problem
i want the green logo and the writing with the white background to be aligned in the center of the left column
real problem
what I realy want

Answer 1

Add text-center class to divs you want to align center. Shown in below code
<div class="col">
<div class="text-center">
<img src="pictures/logooo.png" class="my-2" alt="uc2">
</div>
<div class="text-center">
<a class="rounded shadow-sm bg-white biorHv px-3">Faculté NTIC | Departement de Scolarité</a>
</div>
</div>
This will solve your problem..

Answer 2

add these steps:
HTML
<div class="text-center">
<img src="pictures/logooo.png" class="my-2" alt="uc2">
</div>
css
.col {
padding-left:50px;
}

Answer 3

you can just give "col-md-6" to with column and a "text-align:center;" (horizontal align), and "margin:0 auto". Try this.
<div class="container-fluid mainwrapper p-2">
<div class="row">
<div class="col-md-6" style="text-align:center;">
<div style="float: none; margin: 0 auto;">
<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>
<div class="col-md-6">
<!-- Login form here -->
</div>
</div>
</div>