css vertical align not working correctly - html

Question

I am using css and bootstrap to develop a website and using verticle-align:middle; is not working how it should, but on research of this topic I found a solution to vertical align items but it may not work in older browsers.
This is what I found that work centering images in the columns that they are in.
.logo-container{
height: 100%;
display: flex;
align-items : center;
.logo{
}
}
}
This is what I tried using but could not get it to work.
section#providers{
.logo-container{
height: 100%;
display: table;
.logo{
width: 100%;
display: table-cell;
vertical-align: middle !important;
}
}
}
This is the HTML
<section id="providers">
<div class="container">
<div class="row" id="logos">
<div class="col-2">
<div class="logo-container">
<div class="logo">
<img src="<?php bloginfo('template_directory'); ?>/images/insurance_logos/uh.png" class="img-fluid">
</div>
</div>
</div>
<div class="col-2">
<div class="logo-container">
<div class="logo">
<img src="<?php bloginfo('template_directory'); ?>/images/insurance_logos/test1.png" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</section>
From what I researched all you need to do is set the parent to display as a table, and then the child is displayed as a table cell and you set vertical algin to middle. What am I missing from the picture?

Answer 1

The parent div is missing position:relative;
section#providers{
.logo-container{
position: relative;
height: 100%;
//display: flex;
//align-items : center;
display: table;
.logo{
width: 100%;
display: table-cell;
vertical-align: middle !important;
}
}
}