Moving an element center of window on click of it

Question

What I've in HTML is 1 main box and 1 inner box with position absolute. Inner box has more small boxes. What i'm trying to achieve is, when i click on a box, whole inner box move and make the box at center of the window.

For example look at the image i attached. First image is normal status. 2nd image is, after clicking on first box, the inner box is moved and made the first box in center of the screen. If i click on the 2nd box it should move the white box to a position so 2nd box shows at center. Same for 3rd box, 4th box and so on.

I'm not sure how to do it. but i've the snippet might help you to tell me what to do.

$('.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

toggle a new class in jquery with top:50%; left:50%; and calculate the margin value by box position relative to parent

var pat=$('#inner-box').offset().top,pal=$('#inner-box').offset().left;
$('.box').click(function() {
    var top = pat+$(this).position().top+$(this).height()/2;
    var left = pal+$(this).position().left+$(this).width()/2;
    //alert(top +","+left);
    $('#inner-box').css({
      'margin-left' : -1*left,
      'margin-top' : -1*top
    });
  if(!$('#inner-box').hasClass('newposit'))
    $('#inner-box').addClass('newposit');
});

.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;
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;
  }

  .box{
display:inline-block;
border:1px solid red;
background-color: black;
height: 20%;
width: 22%;
margin:1.1%;
  }
  .newposit {
top: calc(50%);
left: calc(50%);
  }

<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 2

You must find the index of clicked little box:

var indexOfClickedBox;
$('.box').click(function(){
    indexOfClickedBox = $('.box').index(this);
});

From this index you can find the position of little box in its parent. and you can calculate values to put this box in center.

Answer 3

I found the solution. If someone looking for same solution, here is my code-

$(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
    })
});

Answer 4

You could use CSS trastion with calc to get the documents with and height divided by 2 to move the box to the center of the screen. Just toggle a class on the #inner-box element.

Here is one way to do it.

$('.box').click(function() {
  $('#inner-box').toggleClass('center');
});

body {
  margin: 0;
}

.main-box{
  position:relative;
  height: 100vh;
  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;
  -webkit-transition: top 0.3s linear, left 0.3s linear;
  -moz-transition: top 0.3s linear, left 0.3s linear;
  -ms-transition: top 0.3s linear, left 0.3s linear;
  -o-transition: top 0.3s linear, left 0.3s linear;
  transition: top 0.3s linear, left 0.3s linear;
}

#inner-box.center {
  top: calc(100vh / 2);
  left: calc(100vw / 2);
}

.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>