Jquery垂直centering..What是错误吗？

Question

有没有人能告诉我为什么这个不起作用？问题是，当我打开页面时，在开始时.flex-viewport不在正确的位置，就像我调整大小或重新加载页面时一样。

你可以在这里看到问题：http://www2.adcd.ch/?projects=fatti-e-cifre。如果你查看智能手机或平板电脑，你就会明白这是什么意思:开始的图像滑块并不在垂直的中间，相反，你可以在重新加载页面时看到。没有控制台错误。我假设我不擅长使用jquery，我正在努力学习！提前进行thx检查。

var halfWindowHeight = jQuery( window ).height()/2;
var halfViewportHeight = jQuery('#content .flexslider .slides li').height()/2;

function putOnTheMiddle(){
    var halfWindowHeight = jQuery( window ).height()/2;
    var halfViewportHeight = jQuery('#content .flexslider .slides li').height()/2;
    var result = parseFloat(halfWindowHeight) - parseFloat(halfViewportHeight);
    var viewportNavHeight =  jQuery('.flex-control-nav li').height();
    var paddingViewNav = jQuery('.flex-control-nav').css('padding-top');
    var totViewNav = parseFloat(viewportNavHeight) + parseFloat(paddingViewNav);

    jQuery('.flex-viewport').css("margin-top", result - parseFloat(totViewNav) + "px");
}


jQuery( window ).load(function(halfViewportHeight){
    putOnTheMiddle()
});

jQuery( window ).resize(function(halfViewportHeight){
    putOnTheMiddle()
});

Answer 1

这实际上并不是一个错误。在页面加载开始时，您的div的margin-top值为0，否则为smth值，但是当脚本运行时，它会应用新的页边距，不过，它会通过您为其指定的过渡移动到它。发生这种情况的原因是您在页面底部加载脚本，所以浏览器在加载和构建所有DOM之后才会获取它们。对于所有这些，您可以使用一些css，比如

#yourdiv{
    position:absolute;
    left: 50%;
    top: 50%;
    margin-top: -half-of-element-heigh;
    margin-left: -half-of-element-width;
}

对于动态高度元素，可以使用flexbox

#yourParentdiv{
    display: flex;
    justify-content: center;
    align-items: center;
}

Fiddle

Answer 2

我刚刚调试了你的代码，发现paddingViewNav是15px，这导致滑块上移了more....ideally，与桌面相比，移动设备应该更少。