Jquery vertical centering .. 오류가 무엇입니까?

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 또는 그 밖의 다른 값이 있지만 스크립트가 실행될 때 새 마진이 적용되지만 전환 할 때 전환됩니다. 이 오류의 원인은 페이지 하단에 스크립트를로드하기 때문에 모든 DOM을로드 한 후 브라우저에서 가져온 것입니다. 당신이 동적 높이 요소에 대해

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

같은 일부 CSS를 사용할 수있는 모든 위해 , 당신은 flexbox 사용할 수 있습니다

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

Fiddle

Answer 2

난 그냥 코드를 디버깅하고있는 을 그 paddingViewNav이 15px로 나오면 슬라이더가 더 위로 올라 가게됩니다. 이상적으로는 데스크톱에 비해 모바일에 적합해야합니다.