align bootstrap panel center веб-страницы

Question

Я хотел бы выровнять весь этот центр панели веб-страницы. Может ли кто-нибудь помочь мне в этом? Также не могли бы вы помочь мне с хорошей книгой, которую я могу использовать, чтобы изучить дизайн бутстрепа.

<div class="panel panel-default" style="max-width:500px;margin-left:auto;margin-right:auto;"> 
      <div class="panel-heading"> 
       <h3 class="panel-title text-center">User Login</h3> 
      </div> 
      <div class="panel-body"> 
       @Html.ValidationSummary(true) 

       <table class="table"> 
        <tbody> 
         <tr> 
          <td>@Html.LabelFor(model => model.Username)</td> 
          <td>@Html.EditorFor(model => model.Username)</td> 
          <td>@Html.ValidationMessageFor(model => model.Username)</td>        
         </tr> 
         <tr> 
          <td>@Html.LabelFor(model => model.Password)</td> 
          <td>@Html.EditorFor(model => model.Password)</td> 
          <td>@Html.ValidationMessageFor(model => model.Password)</td> 
         </tr> 
         <tr> 
          <td></td> 
          <td> 
           <input type="submit" value="Login" class="btn btn-default" style="" /> 
          </td> 
          <td></td> 
         </tr> 
        </tbody> 
       </table>    

      </div> 
     </div> 

Поблагодарив вы Swetha

Answer 1

Вы можете удалить стиль CSS от panel и обернуть это следующим образом.

<div class="col-sm-6 col-sm-offset-3"> 
    <div class="panel panel-default"> 
    ... 
    </div> 
</div> 

Answer 2

просто добавить

положение: фиксированный

и он будет держать его в виду, даже если вы прокрутите вниз. см. его на http://jsfiddle.net/xyrkyxe8/

#mydiv { 
position:fixed; 
top: 50%; 
left: 50%; 
width:30em; 
height:18em; 
margin-top: -9em; /*set to a negative number 1/2 of your height*/ 
margin-left: -15em; /*set to a negative number 1/2 of your width*/ 
border: 1px solid #ccc; 
background-color: #f3f3f3; 
}