jquery - jQuery：将对象放在页面中心

Question

我想将Obj“包装器”居中在页面中心（垂直意味着什么）jQuery：

$(document).ready(function(){
win_height = $(window).height();
doc_height = $('#wrapper').height();
$('#wrapper').css({'margin-top':(win_height/2)-(doc_height/2)});
});

HTML：

<div id="wrapper" style="width:100px;height:400px;margin: 0 auto;">

</div>

它不起作用，怎么了？谢谢 ！

Answer 1

在 CSS 中它会是这样的

#wrapper{
   top: 50%;
   margin-top: -200px; //half of height
   height: 400px;
}

在 jq 中它可以使用：（可能是一些逻辑上的小错误，因为有点累）

var objHeight = $("#wrapper").height() /2;
var winHeight = $(window).height() /2;
$('#wrapper').css("top", (winHeight - objHeight) + 'px');

Answer 2

您可以像这样使用 Javascript：-

$(document).ready(function(){
    center_y = (jQuery(window).height() - $('#wrapper').height() ) / 2;
    center_x = (jQuery(window).width() - $('#wrapper').width() ) / 2;
    $('#wrapper').css({'margin-top':center_y ,'margin-left':center_x  });
});

或者你可以使用 CSS :-

#wrapper{margin: 0 auto;}

这将使它以 X 线为中心

谢谢，