放置父元素以使其子元素在屏幕上居中

Tolkien Osborn 发表于 Dev

托尔金·奥斯本（Tolkien Osborn）

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

我的代码以1x放大倍数工作，但是当我应用css3变换来放大或缩小父代时，我的计算就出错了。

如果将父元素css transform和js mult var的第1个和第4个元素更改为0.5或2，则计算将不可用。

任何帮助将不胜感激，因为我在这几天里一直在拔头发。

Java脚本

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

伪尘

好的，我通常不写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()给出变换后的位置，同时$("#child").width()给出变换前的宽度。也就是说，使用您发布的CSS，transform: matrix(2, 0, 0, 2, 0, 0);然后使用$("#child").position().left == 460but $("#child").width() == 150。
设置时，$("#parent").css('left', ... )它是变换之前的左偏移，并且变换围绕中心缩放。也就是说，使用您发布的CSS，但是transform: matrix(1.5, 0, 0, 1.5, 0, 0);如果您想将#parent的左边缘设置为与窗口的左边缘对齐，则必须进行设置，$("#parent").css('left', 175)而不是$("#parent").css('left', 0)最初的预期。