You're getting into a right pickle, aren't you ;)
OK looking at the code from here: http://stackoverflow.com/questions/6564752/set-div-height-dynamically-based-on-viewport-height let's borrow the jist of that function and do this...
At the bottom of your page, insert the red code into your script tags;
<script type="text/javascript">
function vp_height() {
var height = $(window).height();
$("#storm-home").css('height', height+'px');
}
$(document).ready(function() {
vp_height();
$(window).bind('resize', vp_height);
$.piroBox_ext({
piro_speed :700,
bg_alpha : 0.5,
piro_scroll : true,
piro_drag :false,
piro_nav_pos: 'bottom'
});
});
</script>
Now, in your HTML higher up the page, wrap another div inside #storm-home;
<article id="storm-home">
<div id="centerme" style="height:600px; position:relative; top:50%; margin-top:-300px">
<div><a href="#storm-dfx" class="home-create"> </a></div>
<div id="text-box1"><img src="http://www.stormdfx.com/stormdfx/img/text-block1.png" alt="text" width="940" height="25" /></div>
<div><a href="#service" class="home-create1"> </a></div>
<div id="text-box2"><img src="http://www.stormdfx.com/stormdfx/img/text-block2.png" alt="text" width="940" height="19" /></div>
<div><a href="#finger-pulse" class="home-create2"> </a></div>
<div id="text-box33"><img src="http://www.stormdfx.com/stormdfx/img/text-block3.png" alt="text" width="940" height="30" /></div>
<div><a href="#award-winning" class="home-create3"> </a></div>
<div id="text-box4"><img src="http://www.stormdfx.com/stormdfx/img/text-block4.png" alt="text" width="940" height="16" /></div>
<div><a href="#repack-service" class="home-create4"> </a></div>
<div id="text-box5"><img src="http://www.stormdfx.com/stormdfx/img/text-block5.png" alt="text" width="940" height="28" /></div>
<div><a href="#drop-line" class="home-create5"> </a></div>
<div>
<div id="text-box6"><img src="http://www.stormdfx.com/stormdfx/img/text-block6.png" alt="text" width="146" height="47" /></div>
<div><a href="#your-brand" class="home-create6"> </a></div>
</div>
<nav class="next-prev" style="margin-top:90px">
<hr /><a class="next storm-dfx" href="#storm-dfx">Next</a>
</nav>
</div>
I called it "centerme" and estimated the overall height of your existing menu at being 600px to allow me to set the -300px negative offset.
Notice how I also plucked out your <nav class="next-prev"> + inner <hr> and put them inside the "storm-home" div otherwise it will go floating off into the middle of the screen. I also just added a top margin of 90px to bring it back to roundabout the same position as it previously was, but you can mess with exact pixels to suit.
If, all goes well, you'll get this: http://jemthingsandstuff.co.uk/testing/center-div-in-viewport.html
Is this something you can work with?
BTW - I used to live in Alfreton (well, Riddings)