वेब पेज के बूटस्ट्रैप पैनल केंद्र को संरेखित करें

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> 

धन्यवाद आप श्वेता

Answer 1

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