Vertically Centred Text inside window height variable div - html

Question

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 http://digitalsix.hostzi.com/
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 http://www.pixelbeach.co.uk/
I just cant seem to find the way to do it. If anyone could help that would be great.
Markup:
#screenfiller{
height: 100vh;
background-image: url(topbar_1.jpg);
background-position: center;
}
<div id="screenfiller">
<header>
<img alt="Digital Six Creative" src="logo.svg">
</header>
<p>TEST BUTTON</p>
</div>
</div>
<a name="about"></a>
</div>

Answer 1

You could wrap the content in a container div, and do:
.container{
position:absolute;
top:50%;
transform:translateY(-50%);
}
Or:
#screenfiller{
...
display:table;
width:100%;
}
.container{
display:table-cell;
vertical-align:middle;
}
To take the header into account, change your #screenfiller height property to height: calc(100vh - 340px); where 340px is the height of your header.