Вертикальное выравнивание блока начальной загрузки

Question

У меня есть две кнопки:

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-lg-12"> 
      <div class="main"> 
       <button class="btn-primary btn-lg center-block ">Sign in </button><br> 
       <button class="btn-primary btn-lg center-block">Sign up </button> 
      </div> 
     </div> 
    </div> 
</div> 

Как я могу сделать вертикальный выровнять? Я хочу, чтобы эти кнопки были в центре.

Я стараюсь margin-top: 50%, но он не работает для меня.

Answer 1

Если вы просто помещаете их в центр страницы, вам не нужна настройка строки/столбца, но если вам нужна, тогда поместите div .main вокруг своей строки/столбца.

Примечание: я бы использовал btn-block для ваших кнопок, и вам также не нужно center-block.

См. Примеры фрагментов.

Нет строки/столбца Пример

.main { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="main"> 
 
    <button class="btn-primary btn-lg btn-block">Sign in</button> 
 
    <br> 
 
    <button class="btn-primary btn-lg btn-block">Sign up</button> 
 
</div>

С строк/столбцов Пример

.main { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 
    <div class="main"> 
 
    <div class="row"> 
 
     <div class="col-lg-12"> 
 
     <button class="btn-primary btn-lg btn-block">Sign in</button> 
 
     <br> 
 
     <button class="btn-primary btn-lg btn-block">Sign up</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>