title: Centering a div in Skeleton
body: <p>For a project of mine, I'm using Skeleton Boilerplate for the first time. And I'm looking for the best practice of centring a div in Skeleton without bashing into the rules of Skeleton.</p>
  
  <p>At the moment, I've the following structure for a login page.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="sixteen columns vertical-offset-by-one"&gt;
  &lt;div id="loginBox"&gt;
  &lt;img src="images/yeditepeLogo.png" alt="Yeditepe Logo" class="yeditepeLogo" /&gt;
  &lt;form action="" id="loginForm"&gt;
  &lt;input type="text" name="username" required placeholder="username" class="loginTextField"&gt;
  &lt;input type="password" name="password" required placeholder="password" class="loginTextField"&gt;
  &lt;input type="submit" value="Log In" class="loginButton" /&gt;
  &lt;/form&gt;
  &lt;/div&gt;&lt;!-- loginBox --&gt;
  
  &lt;/div&gt;&lt;!-- sixteen columns --&gt;
  
  &lt;div class="sixteen columns"&gt;
  &lt;p align="center"&gt;&lt;a href="registration.html" target="_blank"&gt;Click here to register&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;&lt;!-- container --&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#loginBox, #registrationBox {
    width: 470px;
    height: 450px;
    background-color: white;
    left: 245px; */
    top: 20px; */
    position: relative; 
    margin: 0px auto;  }
  
  #registrationBox {
    height: 500px; }
  
  .yeditepeLogo {
    position: relative;
    left: 40px;
    top: 33px; }
  
  #loginForm, #registrationForm {
    position: relative;
    top: 45px; }
  
  .loginTextField, .registrationTextField {
    position: relative;
    height: 40px;
    width: 388px;
    left: 40px;
    border-color: #dedede;
    border-style: solid;
    border-width: 1px;
    margin-bottom: 10px;
    text-align: left;
    font-size: 18px;
    text-indent: 10px;
    -webkit-appearance: none; }
  
  .loginTextField:focus, .registrationTextField:focus {
    outline-color: #ff9800;
    outline-style: solid;
    outline-width: 1px;
    border-color: white; }
  
  .loginTextField:nth-child(2), .registrationTextField:nth-child(3) {
    margin-bottom: 40px; }
  
  .loginButton, .registrationButton {
    background-color: #77a942;
    position: relative;
    border: none;
    width: 390px;
    height: 60px;
    left: 40px;
    color: white;
    font-size: 24px;
    text-align: center;
    opacity: 0.8; }
    .loginButton:hover, .registrationButton:hover {
      opacity: 1; }
  </code></pre>
  
  <p>As you can see, that #loginBox has a fixed width/height and it should always be on the centre of the page. margin: 0px auto code gives it the horizontal centring. But is it the best practice in Skeleton? Does Skeleton provide a better way?</p>
  
  <p>Also how can I provide it's vertical centring?</p>