Question

有谁能告诉我为什么这不起作用？问题是，当我打开页面时，.flex-viewport开头时{I}不在我调整大小或重新加载页面时。

您可以在此处查看问题：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，这导致滑块向上移动了....理想情况下，与桌面相比，移动设备应该更少

Jquery垂直居中......错误是什么？

2 个答案: