In bootstrap 5 using align-items-center class is the easiest way to align any container. All you have to add align-items-center class to the parent container of the elements you wanted to align.
Center two columns in a row
If you want to center two columns in a row, add align-items-center class to the row. You can also try using align-items-start and align-items-end to align top and bottom.
<div class="container">
<div class="row align-items-center">
<div class="col" style="height:50px">
1 of 2
</div>
<div class="col" style="height:100px">
2 of 2
</div>
</div>
</div>Center DIV without row
If you don’t want to use row then use the align-items-center class with d-flex. Without adding d-flex or row classes you won’t see any changes.
<div class="d-flex align-items-center">
<div class="border p-2">
1 of 2
</div>
<div class="border p-4">
2 of 2
</div>
</div>