Question

我使用以下jQuery代码将网站垂直居中在浏览器窗口内，如果它高于外部包装器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文件的方式，还是有任何解决方法可以让Chrome在这种情况下更快或更早地加载？

Answer 1

我只能假设您要实现的目标是让您的网页始终集中对齐。这可以单独使用CSS完成而无需JS。只需在包裹元素上设置固定宽度，并将modal fade设置为margin或auto。然后，这应该为您居中页面。

修改

关于垂直定位的主题，我将创建一个固定高度的视口，并使用0 auto和position: absolute来定位它。我创造了一个小提琴来演示如何做到这一点。这当然需要一个带有margin: auto的父元素集，并且还认为该元素太需要固定的高度，但这比使用JavaScript解决方案更好。

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

编辑2

另外两个小提琴，用于演示如何使用position: relative和html元素来达到预期效果。通过将这两个元素设置为body和height: 100%然后在width: 100%上使用position: relative，您可以在body元素上使用bottom: 0; height: 90%; left: 0; margin: auto; position: absolute; right: 0; top: 0;创造以便以真实为中心。

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

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

Answer 2

如果你在中心页面（）函数运行之后隐藏它怎么办？像这样......

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演示： http://jsfiddle.net/a21wrepv/

垂直居中的页面＆＃34;跳跃＆＃34;在Chrome上重装，FF和IE工作正常

2 个答案: