對齊引導面板中心的網頁

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

您可以從panel刪除CSS樣式和包裝這個如下。

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