CSSの垂直方向の整列が正しく動作しない

Question

私はCSSとブートストラップを使用してウェブサイトを開発し、verticle-align：middleを使用しています。どのようにすべきかは分かりませんが、このトピックの研究ではアイテムを垂直に整列させるソリューションを見つけましたが、古いブラウザでは機能しない可能性があります。

は、これは、私は、彼らがしている列に画像を中心にその仕事を見つけたものである。

.logo-container{ 
    height: 100%; 
    display: flex; 
    align-items : center; 
    .logo{ 

    } 
} 
} 

これは私が使用してみましたが、それは仕事を得ることができなかったものです。

section#providers{ 
.logo-container{ 
    height: 100%; 
    display: table; 
    .logo{ 
     width: 100%; 
     display: table-cell; 
     vertical-align: middle !important; 
    } 
} 
} 

これは私がすべてを行う必要が表として表示するように親に設定され、その後、子は次のように表示されている研究何からHTML

<section id="providers"> 
 
\t <div class="container"> 
 
\t \t <div class="row" id="logos"> 
 

 
\t \t \t <div class="col-2"> 
 
\t \t \t \t <div class="logo-container"> 
 
\t \t \t \t \t <div class="logo"> 
 
\t \t \t \t \t \t <img src="<?php bloginfo('template_directory'); ?>/images/insurance_logos/uh.png" class="img-fluid"> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="col-2"> 
 
\t \t \t \t <div class="logo-container"> 
 
\t \t \t \t \t <div class="logo"> 
 
\t \t \t \t \t \t <img src="<?php bloginfo('template_directory'); ?>/images/insurance_logos/test1.png" class="img-fluid"> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 

 
\t \t \t </div> 
 
</div> 
 
</section>

ですテーブルのセルと垂直にアルギンを設定します。私は何が絵から欠けていますか？

Answer 1

親divの位置が不足しています。

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; 
    } 
} 
}