title: Center login form bootstrap
body: <p>please help, i want this form dead center both vertical and horizontal so it looks like this <a href="http://www.creattor.com/files/14743/5515/futuristic-login-form-screenshots-1.jpg" rel="nofollow">http://www.creattor.com/files/14743/5515/futuristic-login-form-screenshots-1.jpg</a> and so it is dynamical center hope you can help me.</p>
  
  <pre><code>  &lt;html&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;style&gt;
  body{
  background-color:#33383E;
  }
  
  .login input{
  width:150px;;
  background-color:#1D1E22;
  border: 0px solid;
  padding:5px;
  color:#33383E;
  
  
  }
  .login{
  width:320px;
  padding:20px;
  background-color:#1D1E22;
  border-radius:10px;
  margin-top:33.3%
  
  }
  #user{
      margin-bottom:-10px;
  }
  #pass{
      margin-top:-10px;
      margin-bottom:0px;
  }
  #login{
  display: inline;
  margin: 0;
  }
  hr{
  border:2px solid;
  
  background-color: #33383E;
  }
  
  #circle {
      width: 100px;
      height: 100px;
      background: #33383E;
      -moz-border-radius: 50px;
      -webkit-border-radius: 50px;
      border-radius: 50px;
      float:right;
  }
  #mini-circle{
      width: 70px;
      height: 70px;
      background: #1D1E22;
      -moz-border-radius: 40px;
      -webkit-border-radius: 40px;
      border-radius: 40px;
      margin-right:auto;
      margin-left:auto;
      margin-top:15px;
  }
  .ring{
  margin-top:-125px;
  margin-left: 200px;
  }
  &lt;/style&gt;
  &lt;body&gt;
  
  &lt;div class="container-fluid"&gt;
  &lt;div class="row"&gt;
  
  &lt;div class="col-md-4"&gt;&lt;/div&gt;
  
  &lt;div class="col-md-3"&gt;
  
  &lt;div class="form-group"&gt;
  
  &lt;div class="login"&gt;
      &lt;form id="login" method="post"&gt;
      &lt;input type="text" id="user" name="user" placeholder="Username" /&gt;&lt;br /&gt;
      &lt;hr /&gt;
      &lt;input type="password" id="pass" name="pass" placeholder="Password" /&gt;
      &lt;/form&gt;
  
  &lt;/div&gt;
  
  
  &lt;div class="ring"&gt;&lt;div id="circle"&gt;&lt;div id="mini-circle"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="col-md-4"&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>