컨테이너의 눈금 중앙 정렬 로그?

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