Javascript Jquery将Div移动到屏幕中心（JS）

我正在使用Jquery Transit和JS。在my div中有一个按钮，单击该按钮时，应将容器位置更改为“固定”，并将其移动到屏幕的中心（使用Jquery Transit）。但是，单击后，该框将移动到屏幕的右下角

您可以查看以查看我的问题

javascript：

  WebFont.load({
    google: { families: [ 'Signika:400,700:latin', 'Open+Sans::latin', 'Hammersmith+One::latin' ]},
    active: triggerMasonry,
    inactive: triggerMasonry
  });
var $container;

function triggerMasonry() {
  // don't proceed if $container has not been selected
  if ( !$container ) {
    return;
  }
  //Joocy 
  // init Masonry
$container.imagesLoaded( function() {
  $container.masonry({
    itemSelector: '.p-small',
    "columnWidth": '.grid-size',
    gutter:10
  });
  });
}

// trigger masonry on document ready
  $container = $('#omni-content');
  triggerMasonry();
    var $cards = $('.p-small');
    var cardInFocus = null;

    $cards.each(function(index, elem){
        var $elem = $(elem);
        var pos = $elem.position();
        $(elem).data('orig-x', pos.left);
        $(elem).data('orig-y', pos.top);
    });

    var reset = function(){
        if(cardInFocus){
            $(cardInFocus).transition({x:0,y:0});}      
    };

    $(".o-help").click(function(e) {
        cardInFocus = $(this).closest(".p-small");
        var $doc = $(document);
        var centerX = $doc.width() / 2;
        var centerY = $doc.height() / 2;
        var $card = $(this).closest(".p-small");
        var widthcard = $card.width();
        $(".explain").css('position','fixed');
        $(".explain").css('width', widthcard);
        $card.addClass('explain');
        var origX = $card.data('orig-x');
        var origY = $card.data('orig-y');
        $(".modal-bg").fadeIn("slow");
        $(this).closest(".p-small").transition({x:centerX - origX,y:centerY-origY, duration:750});
    });

    $cards.blur(function(e){
        reset();
    });

---

问题是您正在将容器的左上角移动到容器的中心而不是中心。这就是为什么你可能认为它没有居中。要移动容器的中心，您需要补偿容器一半宽度和一半高度

$(".o-help").click(function(e) {
    cardInFocus = $(this).closest(".p-small");
    var $doc = $(document);
    var centerX = $doc.width() / 2;
    var centerY = $doc.height() / 2;
    var destX = centerX - cardInFocus.width()/2;
    var destY = centerY - cardInFocus.height()/2;
    var $card = $(this).closest(".p-small");
    var widthcard = $card.width();
    $(".explain").css('position','fixed');
    $(".explain").css('width', widthcard);
    $card.addClass('explain');
    var origX = $card.data('orig-x');
    var origY = $card.data('orig-y');
    $(".modal-bg").fadeIn("slow");
    $(this).closest(".p-small").transition({x:destX -  origX,y:destY-origY, duration:750});
});

---

您可以查看以检查结果。

它似乎工作正常。但在当前的实现中，您将容器的左上角移动到屏幕的中心。这就是为什么你可能认为它不起作用。你想把容器的中心移到屏幕的中心吗？@Yevgeniy.Chernobrivets是的，但这不可行。当我尝试它时，它仍然偏离中心。这是你想要的吗？@Yevgeniy.Chernobrivets是的，几乎完全符合我的要求。有些容器有点偏右，但没关系。谢谢