javascript - 重新加载时 Chrome 中的垂直居中页面 "jumping"，FF 和 IE 工作正常

Question

我使用以下 jQuery 代码在浏览器窗口内垂直居中网站，如果它高于外部 wrapper-div(具有固定的宽度和高度)。

$( 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
      });
   }


}

这在 Firefox 和 Internet Explorer 11 中工作得很好；此处网站始终固定在居中位置。

但是在 Chrome 中，每次重新加载页面时，例如通过在菜单中导航，包装器跳转到顶部，然后返回到中心。或者更确切地说，它是在应用 js 更改之前呈现的……就像代码在 Chrome 中运行得太晚了。

我对 JS 很陌生，所以我很难理解我发现的关于 Chrome 加载太晚的问题，但这似乎是一个常见问题。

这是一个 Chrome 问题，因为它处理 JS 文件的方式，或者在这种情况下是否有任何解决方法可以使 JavaScript 在 Chrome 中加载得更快或更早？

Answer 1

我只能假设您要实现的目标是让您的网页始终居中对齐。这可以完全使用 CSS 完成，而不需要任何 JS。只需在包装元素上设置固定宽度并设置 margin至 auto或 0 auto .这应该会为您将页面居中。

编辑

关于垂直定位的主题，我会创建一个固定高度的视口(viewport)并使用 position: absolute和 margin: auto定位它。我创建了一个 fiddle 来演示如何做到这一点。这当然需要父元素集 position: relative并且认为元素也需要固定高度，但这比使用 JavaScript 解决方案要好。

http://jsfiddle.net/h8jL8b8L/1/

编辑 2

另外两个 fiddle 来演示如何使用 html和 body达到预期效果的要素。通过将这两个元素设置为 height: 100%和 width: 100%然后使用 position: relative在 body 上然后你可以使用 bottom: 0; height: 90%; left: 0; margin: auto; position: absolute; right: 0; top: 0;在 viewport/wrapper 上您创建的元素，以便将其垂直居中。

http://jsfiddle.net/h8jL8b8L/2/

http://jsfiddle.net/h8jL8b8L/3/