Q: Vertically centered page "jumping" in Chrome on reload, FF and IE working fine I use the following jQuery code to vertically center a website inside the browser window, if it is higher than the outer wrapper-div (which has a fixed width and height).
$( document ).ready(function() {

     centerPage();
)};

// center page vertically if viewport higher than wrapper
function centerPage(){  

   var viewportHeight = $(window).height();
   var siteHeight = $('#wrapper').height();

   if(viewportHeight > siteHeight){

         $('#wrapper').css({
        'position' : 'absolute',
        'left' : '50%',
        'top' : '50%',
        'margin-left' : -$('#wrapper').outerWidth()/2,
        'margin-top' : -$('#wrapper').outerHeight()/2
      });
   }


}

This works just fine in Firefox and Internet Explorer 11; here the website always stays fixed in the centered position.
But in Chrome, everytime the page is reloaded, e.g. by navigating through the menu, the wrapper jumps to the top and then back to center. Or rather it is rendered before the js changes are applied...like the code is running too late in Chrome.
I'm quite new to JS so I had difficulties understanding what I found about Chrome loading things too late, but it seems to be a common problem.
Is this a Chrome issue due to its way of handling JS files or is there any workaround to make the javascript load faster or earlier in Chrome in this case? 

A: I can only assume what you are trying to achieve is for your webpage to be centrally aligned at all times. This can be done solely using CSS without any need for JS. Simply set a fixed width on the wrapping element and set margin to auto or 0 auto. This should then center the page for you.
EDIT
On the subject of vertical positioning, i'd create a fixed height viewport and use position: absolute and margin: auto to position it. I have created a fiddle to demonstrate how this can be done. This would of course require a parent element set with position: relative and also believe that element would too require a fixed height, but this is better than using a JavaScript solution.
http://jsfiddle.net/h8jL8b8L/1/
EDIT 2
Two more fiddles to demonstrate how you can use the html and body elements to achieve the desired results. By setting both of these elements to height: 100% and width: 100% then using position: relative on the body you can then use bottom: 0; height: 90%; left: 0; margin: auto; position: absolute; right: 0; top: 0; on the viewport/wrapper element you create in order to center it veritcally.
http://jsfiddle.net/h8jL8b8L/2/
http://jsfiddle.net/h8jL8b8L/3/

A: What if you hid it until after your centerPage() function runs? Like this...
js:
// center page vertically if viewport higher than wrapper
function centerPage(){  

   var viewportHeight = $(window).height();
   var siteHeight = $('#wrapper').height();

   if(viewportHeight > siteHeight){
         $('#wrapper').css({
        'position' : 'absolute',
        'left' : '50%',
        'top' : '50%',
        'margin-left' : -$('#wrapper').outerWidth()/2,
        'margin-top' : -$('#wrapper').outerHeight()/2,
        'display' : 'block'
      });
   }
}
$(function(){
    centerPage();
});

html:
<div id="wrapper" style="display:none;">center</div>

jsfiddle demo:
http://jsfiddle.net/a21wrepv/ 
