CSSはpurecssのボタンを垂直に整列させます

Question

私は現在divの上部にあるdiv内にボタンを持っています。私はそれをi番目の親divの中に垂直に配置したい。

.button-login { 
    background-color: white; 
    border: 2px solid #01BDE0; 
    border-radius: 4px; 
    color:#01BDE0; 
    width: 100%; 
    height:46px; 
    vertical-align: middle; 
    font-size: 1vw; 
    display: block; 
} 

これはボタン用のCSSです。

<div class=" pure-u-1 pure-u-md-2-24"><button class="button-login">LOG IN</button></div> 

これはHTML部分です。

私はそれが働いていない垂直整列を試みました。

Answer 1

それはここで働く

<style> 
     .pure-u-1 { width:100%;} 

     .center {height: 500px; background-color: #222;} 

    .vertical-align {position: relative; top: 50%; transform: translateY(-50%); } 
    </style> 



    <div class=" pure-u-1 pure-u-md-2-24"> 
    <div class="center" align="center"> 
    <div class="vertical-align"> 
    <button class="button-login">LOG IN</button> 
    </div> 
    </div> 
</div> 

Answer 2

.video-contant { 
 
    position: absolute; 
 
    background: rgba(7, 7, 7, 0.52); 
 
    width: 100%; 
 
    top: 0px; 
 
    height: 100%; 
 
    display: table; 
 
    
 
} 
 
.hctr { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    color: #fff; 
 
    width: 100%; 
 
    overflow: hidden; 
 
}

<div class="video-contant"> 
 
    <div class="hctr"> 
 
    <button>onewebbell.com<button> 
 
    </div> 
 
</div>