сделайте панель в центре страницы

Question

, поэтому я пытался создать панель формы с Twitter Bootstrap в центре страницы, и, надеюсь, даже когда браузер изменит размер, он все равно будет в центре, here's что я пробовал на jsfiddle, проблема в том, что я не могу показаться, что это центр, у кого есть идеи? полный код находится в ниже

<div class="container"> 
     <div class="row"> 
      <div class="panel panel-default"> 
       <div class="panel-body"> 
        <legend>User Login</legend> 
        <form role="form"> 
         <div class="form-group"> 
          <label for="inputEmail"> 
           Username</label> 
          <input id="inputEmail" type="text" class="form-control" placeholder="ex: John.Doe" 
           required="" /> 
         </div> 
         <div class="form-group"> 
          <label for="inputPassword"> 
           Password</label> 
          <input id="inputPassword" type="password" class="form-control" placeholder="*******" 
           required="" /> 
         </div> 
         <div class="checkbox"> 
          <label> 
           <input id="chkRememberMe" type="checkbox" /> 
           Remember Me 
          </label> 
         </div> 
         <button id="btnSubmit" type="submit" class="btn navbar-custom"> 
          Submit</button> 
        </form> 
       </div> 
      </div> 
     </div> 
    </div> 

предварительный просмотр:

Answer 1

Пожалуйста, замените

<div class="panel panel-default"> 

с этим

<div class="panel panel-default" style="max-width:400px;margin-left:auto; margin-right:auto;"> 

Answer 2

Попробуйте установить размеры полей в атрибут стиля в Div в:

style="margin-left:auto;margin-right:auto;" 

Надеется, что это работает ...

Answer 3

Вы также можете использовать столбцы размера и центрирование панели, например:

<div class="container"> 
    <div class="row"> 
     <div class="col-md-offset-3 col-md-6"> 
      <div class="panel panel-default"> 
       <div class="panel-body"> 
        <legend>User Login</legend> 

        <form role="form"> 
         <div class="form-group"> 
          <label for="inputEmail">Username</label> 
          <input id="inputEmail" type="text" class="form-control" placeholder="ex: John.Doe" required="" /> 
         </div> 

         <div class="form-group"> 
          <label for="inputPassword">Password</label> 
          <input id="inputPassword" type="password" class="form-control" placeholder="*******" required="" /> 
         </div> 

         <div class="checkbox"> 
          <label> 
           <input id="chkRememberMe" type="checkbox" /> 
           Remember Me 
          </label> 
         </div> 

         <button id="btnSubmit" type="submit" class="btn navbar-custom">Submit</button> 
        </form> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>