私のコンテナ内のグリッドのセンタリング？

Question

私は、私のログインを中心に、さまざまなアプローチを試みました。私はそれを縦に、横に私のコンテナに集中させたい。助けていただければ幸いです！誰かが私に良いアイデアをくれますか？

<div class="container login"> 
    <div class="col-md-4 login-centered"> 
     <div class="panel panel-default"> 
      <div class="panel-heading"><h3 class="panel-title"><strong style="color:white">Sign in </strong></h3></div> 
      <div class="panel-body"> 
       <section role="form"> 
        @using (Html.BeginForm() 
        { 
         @Html.AntiForgeryToken() 
         @Html.ValidationSummary() 

         <div class="form-group" style="display:block;margin:auto;"> 
          <label>Username</label> 
          @Html.TextBoxFor() 
          @Html.ValidationMessageFor() 
         </div> 

         <div class="form-group" style="display:block;margin:auto;margin-top:6px;"> 
          <label >Password</label> 
          @Html.PasswordFor() 
          @Html.ValidationMessageFor() 
         </div> 
          <input type="submit" value="Log in" class="pull-right btn-sm btn-default" /> 
        } 
       </section> 
      </div> 
     </div> 
    </div> 
</div> 

これは私のCSSです：

.login-centered { 
    display:block; 
    margin-left:auto; 
    margin-right:auto; 
} 
.panel-heading { 
    background-color: #2190b6!important; 
} 
.btn-default { 
    background-color: #2190b6 !important; 
    border: 1px solid #2190b6 !important; 
    color: #FFF!important; 
    margin-top: 10px; 
} 
.btn-default:hover, .btn-default:active:focus{ 
    background-color: #2190b6 !important; 
    border: 1px solid #2190b6 !important; 
    color: #FFF!important; 
} 

Answer 1

次のCSSコードは、仕事をする必要があります！

.login-centered { 
    top: 50%; 
    left: 50%; 
    transform: translateX(-50%) translateY(-50%); 
    position: absolute; 
}