javascript - 单击它移动窗口的元素中心

Question

我在 HTML 中的是 1 个主框和 1 个具有绝对位置的内框。内盒有更多的小盒子。我想要实现的是，当我点击一个框时，整个内部框移动并使框位于窗口的中心。

例如看我附上的图片。第一张图是正常状态。第二张图片是，在点击第一个框后，内部框被移动并使第一个框位于屏幕中央。如果我单击第二个框，它应该将白框移动到一个位置，以便第二个框显示在中心。第 3 个框、第 4 个框等也是如此。

我不知道该怎么做。但我的代码片段可能会帮助您告诉我该怎么做。

$('.box').click(function(){
  var top = $(this).position().top;
  var left = $(this).position().left;
  $('#inner-box').css({
    'margin-left' : left,
    'margin-top' : top
  });
});

.main-box{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:gray;
  overflow:hidden;
}

  .inner-box{
    position:absolute;
    top: 15px;
    left:15px;
    width:calc(100% - 30px);
    height: calc(100% - 30px);
    background-color: white;
    font-size:0;
  }

  .box{
    display:inline-block;
    border:1px solid red;
    background-color: black;
    height: 20%;
    width: 22%;
    margin:1.1%;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="main-box" id="main-box">
  <div class="inner-box" id="inner-box">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

Answer 1

我找到了解决方案。如果有人在寻找相同的解决方案，这是我的代码-

$(document).on('click', '.box', function(){
    var centerX = $('#main-box').height() / 2;
    var centerY = $('#main-box').width() / 2;

    var pos_top = $(this).position().top;
    var pos_left = $(this).position().left;

    var box_width = $(this).width() / 2;
    var box_height = $(this).height() / 2;

    var top = (-1) * (pos_top - centerX + box_height);
    var left = (-1) * (pos_left - centerY + box_width);


    $('#inner-box').css({
        'margin-left' : left,
        'margin-top' : top
    })
});