定位父元素以使其子元素在屏幕上居中

Question

I'm creating a panable and zoomable UI that requires a child object to be centered on the screen however i need to move the parent object to center the child object on screen.

I have the code working at 1x magnification but when i apply a css3 transform to zoom the parent in or out my calculations go awry.

If you change the 1st and 4th elements of the parent elements css transform and the js mult var to say 0.5 or 2 then the calculations are out.

Any help would be appreciated as i have been pulling my hair out over this for days.

JS fiddle

Javascript

$(function() {

$("#child").click(function(e) {

var mult = 1

$("#parent").css('left',
  (($(window).width() - $("#parent").width()) / 2) +
  ($("#parent").width() * mult) / 2 -
  ($("#child").position().left / mult) -
  ($("#child").width() * mult) / 2
);

$("#parent").css('top',
  (($(window).height() - $("#parent").height()) / 2) +
  ($("#parent").height() * mult) / 2 -
  ($("#child").position().top / mult) -
  ($("#child").height() * mult) / 2
);

})

});

CSS

.parent {
  position: relative;
}

#child {
  border: 1px solid red;
  position: absolute;
  z-index: 3;
  width: 150px;
  height: 150px;
  top: 300px;
  left: 230px;
  background-color: cornflowerblue;
  color: white
}

#parent {
  position: relative;
  width: 700px;
  height: 900px;
  transform: matrix(1, 0, 0, 1, 0, 0);
  border: 1px solid red;
  background: pink
}

HTML

<div class="parent">
  <div id="parent">
    <div class="testBox" id="child">CLICK ME</div>
  </div>
</div>

Answer 1

Ok, I don't usually write JS, but I got it working:

$(function() {

  $("#child").click(function(e) {

    var mult = 3

    $("#parent").css('left',
        (($(window).width()-$("#child").width()*mult) / 2) -
        $("#child").position().left +
        (mult-1) * $("#parent").width() / 2
    );

    $("#parent").css('top',
        (($(window).height()-$("#child").height()*mult) / 2) -
        $("#child").position().top +
        (mult-1) * $("#parent").height() / 2
    );
  })
});

Here are the things that I think might have made it difficult for you (they did for me):

1. $("#child").position() gives the position after the transform whilst $("#child").width() gives the width before the transform. that is, with the CSS you posted but with transform: matrix(2, 0, 0, 2, 0, 0); then $("#child").position().left == 460 but $("#child").width() == 150 .

2. When setting $("#parent").css('left', ... ) it is the left offset before the transform and the transform scales around the center. that is, with the CSS you posted but with transform: matrix(1.5, 0, 0, 1.5, 0, 0); if you would want to set #parent 's left edge to be aligned with the left edge of the window then you have to set $("#parent").css('left', 175) and not $("#parent").css('left', 0) as I initially expected.