title: Centering <div>s on a page by Bootstrap colums
body: <p>I have some jQuery script to show a contact form by clicking on <code>Get in contact</code>. Both, the <code>&lt;div&gt;</code> elements of the <code>Get in contact</code>-button and the <code>&lt;div&gt;</code> elements of the contact form  are wrapped in <code>&lt;div class=" col-md-12 text-center"&gt;</code>, still the column-ratio is not like I would: resp. 3-6-3 and 2-8-2. Both, <code>Get in contact</code> and the contact form are just placed somewhere to the left. </p>
  
  <p>How to center both in the very middle? Thanks in advance!</p>
  
  <p><a href="http://codepen.io/iJup/pen/epZBgw" rel="nofollow">Codepen</a> (changing the zoom fit it is not anymore in the center)</p>
  
  <p><strong>HTML:</strong>
  </p>
  
  <pre><code>&lt;body&gt;
   &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;title&gt;JFP&lt;/title&gt;
      &lt;link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css"&gt;
          &lt;link rel="stylesheet" href="/static/main.css" &gt;
      &lt;link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
      &lt;script src="/static/app.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  
  &lt;div class="supporting"&gt;
      &lt;div class="container" style="min-height:300px;"&gt;
        &lt;div class="col-md-12 text-center"&gt;
          &lt;div class="col-md-3 text-center"&gt;&lt;/div&gt;
              &lt;div class="col-md-6 text-center"&gt;
                  &lt;img src="http://rexkirby.com/kirbyandson/images/email.svg"&gt;
                  &lt;h2&gt;Contact&lt;/h2&gt;
                  &lt;p&gt;&lt;/p&gt;
                  &lt;div class="contact-form"&gt;
                      &lt;b&gt;Get in contact&lt;/b&gt;
                  &lt;/div&gt;  
  
                &lt;div class="col-md-3 text-center"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div class="contactform" style="display:none"&gt;
      &lt;div class="container"&gt;
          &lt;div class=" col-md-12 text-center"&gt;
              &lt;div class="col-md-2"&gt;
              &lt;/div&gt;
              &lt;div class="col-md-8 text-center"&gt;
                  &lt;form class="form" id="form1"&gt;
  
                  &lt;p class="name"&gt;
                  &lt;input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" /&gt;
                  &lt;/p&gt;
  
                  &lt;p class="email"&gt;
                  &lt;input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" /&gt;
                  &lt;/p&gt;
  
                  &lt;p class="text"&gt;
                  &lt;textarea name="text" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Comment"&gt;&lt;/textarea&gt;
                  &lt;/p&gt;
  
                  &lt;div class="row col text-center"&gt;
                  &lt;div class="submit"&gt;
                  &lt;input type="submit" value="SEND" id="button-blue"/&gt;
                  &lt;div class="ease"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
              &lt;div class="col-md-2"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>CSS:</strong>
  </p>
  
  <pre><code>.supporting {
      padding-top: 80px;
      padding-bottom: 100px;
  
  }
  
  .supporting .col-md-6 {
      font-family: 'Open Sans', sans-serif;
      text-align: center;
      margin-bottom: 64px;
      padding: 0px 0px;
  }
  
  .supporting img {
      height: 40px;
  }
  
  .supporting .col-md-6 h1 {
      font-size: 35px;
      padding-bottom: 48px;
      margin-top: 49px;
  }
  
  .supporting h2 {
      font-weight: 600;
      font-size: 23px;
      text-transform: uppercase;
      padding: 0 50px;
      margin-bottom: 60px;
  }
  
  .supporting p {
      font-weight: 400;
      font-size: 14px;
      line-height: 20px;
  }
  
  .supporting a {
      font-size: 10px;
      color: rgb(51,51,51);
      font-weight: 600;
      border: 1px solid rgb(51,51,51);
      padding: 15px 50px;
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: 1.1px;
      position: relative;
  }
  
  .supporting b {
      font-size: 10px;
      color: rgb(51,51,51);
      font-weight: 600;
      border: 1px solid rgb(51,51,51);
      padding: 15px 39px;
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: 1.1px;
      position: relative;
  }
  
  .supporting c {
      font-size: 15px;
      color: rgb(51,51,51);
  }
  
  
  .clearfix {
      clear: both;
  }
  
  #feedback-page{
      text-align:center;
  }
  
  #form-main{
      width:100%;
      float:middle;
      padding-top:0px;
  }
  
  #form-div {
      background-color:rgba(72,72,72,0.4);
      padding-left:35px;
      padding-right:35px;
      padding-top:35px;
      padding-bottom:50px;
      width: 450px;
      float: middle;
      left: 50%;
      position: absolute;
      margin-top:30px;
      margin-left: -260px;
      -moz-border-radius: 7px;
      -webkit-border-radius: 7px;
  }
  
  .feedback-input {
      color:#3c3c3c;
      font-family: 'Open Sans', sans-serif;
      font-weight:500;
      font-size: 18px;
      border-radius: 0;
      line-height: 22px;
      background-color: rgb(245,245,245);
      padding: 13px 13px 13px 54px;
      margin-bottom: 10px;
      width:100%;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
      box-sizing: border-box;
      border: 3px solid rgba(0,0,0,0);
  }
  
  .feedback-input:focus{
      background: #fff;
      box-shadow: 0;
      border: 3px solid rgb(42,186,214);
      color: rgb(51,51,51);
      outline: none;
      padding: 13px 13px 13px 54px;
  }
  
  .focused{
      color:#30aed6;
      border:#30aed6 solid 3px;
  }
  
  #name{
      background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
      background-size: 30px 30px;
      background-position: 11px 8px;
      background-repeat: no-repeat;
  }
  
  #name:focus{
      background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
      background-size: 30px 30px;
      background-position: 8px 5px;
      background-position: 11px 8px;
      background-repeat: no-repeat;
  }
  
  #email{
      background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
      background-size: 30px 30px;
      background-position: 11px 8px;
      background-repeat: no-repeat;
  }
  
  #email:focus{
      background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
      background-size: 30px 30px;
      background-position: 11px 8px;
      background-repeat: no-repeat;
  }
  
  #comment{
      background-image: url(https://s3.amazonaws.com/codecademy-content/projects/broadway/design.svg);
      background-size: 30px 30px;
      background-position: 11px 8px;
      background-repeat: no-repeat;
  }
  
  textarea {
      width: 100%;
      height: 150px;
      line-height: 150%;
      resize:vertical;
  }
  
  input:hover, textarea:hover,
  input:focus, textarea:focus {
      background-color:white;
  }
  
  #button-blue{
      font-family: 'Open Sans', sans-serif;
      float:middle;
      width: 25%;
      border: rgb(51,51,51) solid 1px;
      cursor:pointer;
      background-color: rgb(255,255,255);
      color: rgb(51,51,51);
      font-size: 16px;
      padding-top:12px;
      padding-bottom:12px;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      transition: all 0.3s;
      margin-top:-4px;
      font-weight:600;
      letter-spacing: 1.1px;
  }
  
  #button-blue:hover{
      color: rgb(51,51,51);
  }
  
  .submit:hover {
      rgb(51,51,51);
  }
  
  .ease {
      width: 0px;
      height: 74px;
      background-color: #fbfbfb;
      -webkit-transition: .3s ease;
      -moz-transition: .3s ease;
      -o-transition: .3s ease;
      -ms-transition: .3s ease;
      transition: .3s ease;
  }
  
  .submit:hover .ease{
      width:100%;
      background-color:white;
  }
  </code></pre>
  
  <p>
   <strong>JS:</strong>
  </p>
  
  <pre class="lang-js prettyprint-override"><code>$(document).ready(function() {
          $(".contact-form").click(function() {
              $(".contactform").slideToggle(300);
          });
  });
  
  $(document).ready(function() {
      $(".contact-form").on("click", function() {
              $("body").animate({"scrollTop": window.scrollY+300}, 700);
                  return false;
      });
  });
  </code></pre>