title: Center login box to the page responsively with a footer at the bottom
body: <p>I am getting frustrated in my past few days of attempts with trying to make my login box completely center on the page. I want it to be responsive to device size, so I went with Bootstrap. For me though, I have it centering responsively on the page at the top, but I need to also move it down to center it over the entire page.</p>
  
  <p>Also I have a footer that goes underneath.</p>
  
  <p>Here is what I have</p>
  
  <pre><code>    &lt;%@ Page Language="vb" AutoEventWireup="false" CodeBehind="login.aspx.vb" Inherits="login" %&gt;
  
  &lt;!DOCTYPE html&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link href="Content/bootstrap.min.css" rel="stylesheet" /&gt;
      &lt;script src="Scripts/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"&gt;
  
      &lt;script src="Scripts/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;style type="text/css"&gt;
          body, html {
              background: url(../images/bgmain.png) 100% no-repeat fixed;
              font-family: 'Oxygen', sans-serif;
              background-size: cover;
          }
  
  
          .main {
              vertical-align: middle;
          }
  
          hr {
              width: 10%;
              color: #fff;
          }
  
          .form-group {
              margin-bottom: 15px;
          }
  
          label {
              margin-bottom: 15px;
          }
  
          input,
          input::-webkit-input-placeholder {
              font-size: 11px;
              padding-top: 3px;
          }
  
          .main-login {
              background-color: #fff;
              /* shadows and rounded borders */
              -moz-border-radius: 2px;
              -webkit-border-radius: 2px;
              border-radius: 2px;
              -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
              -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
              box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
          }
  
          h1 {
              font-family: 'Montserrat', sans-serif;
          }
  
          .main-center {
              margin-top: 50px;
              margin: 0 auto;
              max-width: 400px;
              padding: 40px 40px;
          }
  
          .login-button {
              margin-top: 5px;
          }
  
          .login-register {
              font-size: 11px;
              text-align: center;
          }
  
          #footer {
              position: fixed;
              bottom: 0;
              padding: 5px;
              align-content: center;
              width: 100%;
          }
  
          .auto-style1 {
              width: 88px;
              height: 32px;
          }
      &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
  
  
          &lt;div class="container"&gt;
              &lt;div class="row main"&gt;
                  &lt;div class="panel-title text-center"&gt;
                      &lt;h1 class="title"&gt;Title&lt;/h1&gt;
                      &lt;hr /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="main-login main-center"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="username" class="cols-sm-2 control-label"&gt;User&lt;/label&gt;
                      &lt;div class="cols-sm-10"&gt;
                          &lt;div class="input-group"&gt;
                              &lt;span class="input-group-addon"&gt;&lt;i class="fa fa-user fa" aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;
                              &lt;asp:TextBox ID="tbUser" runat="server" class="form-control" name="user" placeholder="Enter your password"&gt;&lt;/asp:TextBox&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="form-group"&gt;
                      &lt;label for="password" class="cols-sm-2 control-label"&gt;Password&lt;/label&gt;
                      &lt;div class="cols-sm-10"&gt;
                          &lt;div class="input-group"&gt;
                              &lt;span class="input-group-addon"&gt;&lt;i class="fa fa-lock fa-lg" aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;
                              &lt;asp:TextBox ID="txtPass" runat="server" class="form-control" placeholder="Enter your password" name="password"&gt;&lt;/asp:TextBox&gt;
  
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="form-group "&gt;
  
                      &lt;asp:Button ID="Button2" runat="server" class="btn btn-primary btn-lg btn-block login-button" Text="Login" /&gt;
                  &lt;/div&gt;
                  &lt;div class="login-register"&gt;
                      &lt;a href="create_account.php"&gt;Create account&lt;/a&gt; or &lt;a href="reset_password.php"&gt;reset password&lt;/a&gt;
                      &lt;asp:Label ID="lblerror1" runat="server" Text="Label"&gt;&lt;/asp:Label&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;div id="footer" class="login-register"&gt;
              &lt;img alt="" class="auto-style1" src="images/logo.png" /&gt;&lt;br /&gt;
              Copyright © 2016. All rights reserved. Privacy Policy&lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>