verticle-align：中間が機能していない、それを修正する方法？

Question

verticle-align：middleは動作していません。どのように修正するのですか？

.forgot-container { 
 
    margin-left: 28vw; 
 
    background: rgb(216,220,226) !important; 
 
    height: 100%; 
 
    width: 36rem; 
 
    vertical-align: middle; 
 
}

<div class="row"> 
 
    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 forgot-container"> 
 
    HTML COMPONENTS 
 
    </div> 
 
</div>

Answer 1

このようなあなたのコードを更新します。

<style> 
.forgot-container { 
     margin-left: 28vw; 
     background: rgb(216,220,226) !important; 
     height: 100%; 
     width: 36rem; 
     verticle-align:middle; 
    } 
.forgot-inner{ 
    position: relative; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
    width:100%; 
    text-align:center; 
} 
</style> 
<div class="row"> 
    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 forgot-container"> 
    <div class="forgot-inner"> 
    HTML COMPONENTS 
    </div> 
    </div> 
</div>