JQuery 将一个元素设置在另一个元素的中间

Question

嗨，我有一些像这样的元素：

<div id="one">content</div>
<div id="two">content</div>

和相应数量的元素（没有任何父元素，它们就在 body 标签之后），它们具有：

position: absolute;

并且具有这样的 id：

id="helper-one" refers to id="one"

现在我想将第二组元素恰好放置在引用元素的中间（垂直和水平），我该怎么做？

我尝试过使用 offset:

    var one_offset = $("#one").offset();

    $("#helper-one").offset({ top: one_offset.top, right: one_offset.right, left:one_offset.left, bottom: one_offset.bottom})

但它仅设置顶部和左侧的位置，将助手定位在元素的左上角而不是其中心

Answer 1

jQuery.fn.center = function (obj) {
  var loc = obj.offset();
  this.css("top",(obj.outerHeight() - this.outerHeight()) / 2 + loc.top + 'px');
  this.css("left",(obj.outerWidth() - this.outerWidth())  / 2 + loc.left+ 'px');
  return this;
}

调用为 $("#helper-one").center($("#one"));

ps：你甚至可以通过解析原始元素的 id 来跳过 obj 参数

jQuery.fn.center = function () {
  var obj = $('#' + this.attr('id').split('-')[1]), loc = obj.offset();
  this.css("top",(obj.outerHeight() - this.outerHeight()) / 2 + loc.top + 'px');
  this.css("left",(obj.outerWidth() - this.outerWidth())  / 2 + loc.left+ 'px');
  return this;
}

$(document).ready(function(){
   $("#helper-one").center();       
});