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

Question

我正在创建一个可平移和缩放的 UI，它需要一个子对象在屏幕上居中，但是我需要移动父对象以使子对象在屏幕上居中。

我的代码在 1 倍放大率下工作，但是当我应用 css3 变换来放大或缩小父对象时，我的计算出错了。

如果您更改父元素的第 1 个和第 4 个元素 css 转换和 js mult var 为 0.5 或 2，则计算失败。

任何帮助将不胜感激，因为我已经为此苦恼了好几天。

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

好吧，我通常不写 JS，但我搞定了：

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

以下是我认为可能对您造成困难的事情（他们对我造成的）：

$("#child").position() 给出位置 after 变换而 $("#child").width() 给出宽度 before 变换。也就是说，您发布的 CSS 但 transform: matrix(2, 0, 0, 2, 0, 0); 然后 $("#child").position().left == 460 但 $("#child").width() == 150。
设置$("#parent").css('left', ... )时，它是变换前的左偏移量，变换围绕中心缩放。也就是说，使用 CSS 发布，但使用 transform: matrix(1.5, 0, 0, 1.5, 0, 0); 如果您想将 #parent 的左边缘设置为与 window 的左边缘对齐，那么您必须设置 $("#parent").css('left', 175) 而不是我最初预期的 $("#parent").css('left', 0) 。

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

Positioning a parent element to center it's child on the screen

javascript

css

math

jquery

css-position