Question

我试图将一个物体放在屏幕区域的中间高度。我认为这段代码可以用来计算我对象的Y位置：

var y = $chart.offset().top + $chart.outerHeight()/2;

但是对象显示的是图表顶部约60％，低于我想要的。以下是调试器中的一些实际数字：

$chart.offset().top
367.79999923706055
$chart.outerHeight()
451
y
593.2999992370605

做这样的事情的正确方法是什么？

Answer 1

因为看起来你并没有严格限制使用jQuery这个解决方案（评论），但是你不知道任何其他选择。所以我建议一个。

替代方法 - 使用CSS

您可以使用CSS代替使用Javascript定位元素，并将元素fixed放置在屏幕中间。一些最明显的好处：

您不必在客户端上执行其他代码=提高性能
无论文档滚动如何，元素都保持集中 - 如果你想要使用Javascript，你应该重新计算滚动事件的位置，但当文件快速滚动时，元素仍然会跳因为Javascript执行是不即时（尚）

由于您正在动态添加元素，因此您只需将其设置为特定的CSS类名称，该类名称定义CSS文件中的中心位置。

如果您不知道如何在屏幕中间放置元素，this JSFiddle会告诉您如何操作。它只是将元素定位在视口的中间，但不会生成新元素，因为您似乎已经知道如何执行此操作。

必需的CSS

.centralise {
  width: 200px; /* set dimension */
  height: 50px;
  position: fixed;
  top: 50%; /* move top left to screen centre */
  left: 50%;
  margin: -25px 0 0 -100px; /* offset by half element's size left and up */
  text-align: center; /* centralise text within element */
  line-height: 50px;
}

如果你要将你的元素放在最左边和左边50％，你必须给它一个特定的尺寸，这样你就可以设置精确的负边距，使其处于死角。

没有固定的尺寸？

如果您无法设置特定元素维度，那么margin: 25% auto;应该对此有所帮助。但在这种情况下，它只能水平放置在死点。垂直位置通常没有问题，因为您可以将元素放在上半部分或大约中心，它仍然看起来像集中。根据您的文档内容，有时将它高于中心可能更好。

Answer 2

您必须将y设为(height of window / 2) - (height of element / 2)。

var y = $(window).height() /2 - $chart.outerHeight()/2;

另外，检查CSS：

position:absolute;

Live Demo

Answer 3

查看我的jsfiddle。

如果您只想查找父元素的中心，可以使用height()并在父容器中追加元素：

var $parent = $('#parent');
var middle = $parent.height() / 2;
var $child = $(document.createElement('div'));
$child.attr("id", "child").text("hi")
   .css("position", "absolute")
   .css("top", middle - $child.height() / 2);
$parent.append($child);

在jQuery中计算对象放置

3 个答案:

替代方法 - 使用CSS

必需的CSS

没有固定的尺寸？