Centering DIV Horizontally & Vertically on Page Load

[uuuiiio]

How can I center a DIV both horizontally and vertically immediately when the page loads?I am currently using the following solution:HTML:\[code\]<div class="container"> <div class="visitorSelect"> <a href="http://stackoverflow.com/visitorLog/boeing"> <div class="tile double icon bg-color-blue"> <div class="tile-content"> <i class="icon-plane"></i> </div> <div class="brand"> <span class="name">Employee</span> </div> </div> </a> <a href="http://stackoverflow.com/visitorLog/guest"> <div class="tile double icon bg-color-orange"> <div class="tile-content"> <i class="icon-group"></i> </div> <div class="brand"> <span class="name">Guest</span> </div> </div> </a> </div> <!-- visitorSelect --></div> <!-- container -->\[/code\]JavaScript:\[code\]<script>$(document).ready(function(){ $(window).resize(function() { $('.visitorSelect').css( { position: 'absolute', left: ($(window).width() - $('.visitorSelect').outerWidth()) / 2, top: ($(window).height() - $('.visitorSelect').outerHeight()) / 2 }); }); // call `resize` to center elements $(window).resize();});</script>\[/code\]When I initially load the page, the \[code\]DIV\[/code\] to center shows up at the right of the page and slightly below the center of vertical. However, when I resize the page manually it snaps to exactly where it should.What additional steps do I need to take to cause the centering properly place the element at the time the document loads?