title: Vertically Centred Text inside window height variable div
body: <p>So I want to be able to centre all my content inside a particular div. The div in question has a 'height: 100vh; attribute to enable it to fit the height of the viewers window.. you can view it at <a href="http://digitalsix.hostzi.com/" rel="nofollow">http://digitalsix.hostzi.com/</a></p>
  
  <p>What i'm looking at being able to do is center the content at all times, including when the window has been resized (i realise once it gets too small theres not much that can be done. An example of what im looking for is <a href="http://www.pixelbeach.co.uk/" rel="nofollow">http://www.pixelbeach.co.uk/</a></p>
  
  <p>I just cant seem to find the way to do it. If anyone could help that would be great.</p>
  
  <p>Markup:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#screenfiller{
      height: 100vh;
      background-image: url(topbar_1.jpg);
      background-position: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div id="screenfiller"&gt;
      &lt;header&gt;
      &lt;a href="#"&gt;&lt;img alt="Digital Six Creative" src="logo.svg"&gt;&lt;/a&gt;
      &lt;/header&gt;
  
      &lt;p&gt;&lt;a href="#location" class="button_med_white_o"&gt;TEST BUTTON&lt;/a&gt;&lt;/p&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;a name="about"&gt;&lt;/a&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>