Question

使用Javascript制作绝对定位的悬停元素（使高度随内容变化）的便捷方法是将宽度，顶部和左侧指定为样式字段。例如：

popup.style.width  = foo.offsetWidth - 10 + 'px';
popup.style.top    = document.getElementById(bar)
    .getBoundingClientRect().top + 'px'; // for IE7, can't use offsetTop
popup.style.left   = '15px';

如何根据其中心而不是顶部来调整此代码以绝对定位弹出窗口？我想popup.style.center而不是popup.style.top，但这不是CSS的工作方式。一个完全天真的解决方案是将它添加到DOM，然后测量其高度，并从顶部减去一半的高度。

或者，是否有一种完全不同的方法仍然允许为元素的每个角设置一个任意位置？

我正在寻找一个纯粹的Javascript解决方案（例如没有jquery）。

重要：我不是试图将弹出窗口置于另一个元素中。相反，我希望将弹出窗口的中心点指定为从屏幕顶部偏移的像素。该像素偏移可以基于另一个元素，或者它可以是原始数。

Answer 1

在jquery中执行此操作非常简单

DEMO jsFiddle

jQuery.fn.center = function(parent) {
    if (parent) {
        parent = this.parent();
    } else {
        parent = window;
    }
    this.css({
        "position": "absolute",
        "top": ((($(parent).height() - this.outerHeight()) / 2) + $(parent).scrollTop() + "px"),
        "left": ((($(parent).width() - this.outerWidth()) / 2) + $(parent).scrollLeft() + "px")
    });
return this;
}
$("div.target").center(true);

Answer 2

在您的重要提示中，您正在处理两种不同的概念：

第一个偏离屏幕顶部，可以使用position:fixed。
第二个，基于另一个元素的偏移，是绝对定位有用的地方，并且相对于第一个position:relative父元素。

建议Table-Cell centering（感谢Itay评论）在您的情况下使用表格显示是有道理的，因为它正是其目的：使容器适应其内容。

你需要一些额外的HTML：

<div class="container">
  <div class="popup">
    <div class="content">
      <!-- CONTENT -->
    </div>
  </div>
</div>

并应用此css：

.container {
  position: absolute; /* or fixed */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.popup {
  display: table;
  height: 100%;
}
.content {
  display: table-cell;
  vertical-align: middle;
}

感谢表格单元格显示，您可以使用vertical-align: middle，不再需要javascript。

对于水平居中，您仍然可以在弹出类中添加经典width: 50%; margin: 0 auto;。

Answer 3

我一直在想这个问题。实际上，您可以通过在容器内添加div来绝对地从容器的中心而不是角落定位元素。该内部容器或参考容器的高度为父容器的50％高度和50％宽度。然后你可以相对于右下角定位。

<强> HTML

<div class="container">
  <div class="container-inner">
    <div class="pointer pointer-1" data-name="pointer-1"></div>
    <div class="pointer pointer-2" data-name="pointer-2"></div>
  </div>
</div>

<强> CSS

这是我们想要在

中放置指针的容器

html, body {
  height: 100%;
}

.container {
  height: 80%;
  width: 80%;
  margin: 0 auto;
  border: 1px solid blue;
}

我们使用此容器获取可用作参考的中心点。我们使用此div的右下角作为参考点。

.container-inner {
  border: 1px dashed red;
  height: 50%;
  width: 50%;
  position: relative;
}

创建几个直径为60px的目标

.pointer {
  height: 40px;
  width: 40px;
  background-color: orange;
  border: 10px solid red;
  border-radius: 60px;
  position: absolute;
}

将目标中心设置在容器的中心

.pointer-1 {
  bottom: calc(-0% - 30px);
  right: calc(-0% - 30px);
}

将目标2从集装箱中心向右和向下定位25％。

.pointer-2 {
  bottom: calc(-50% - 30px);
  right: calc(-50% - 30px);
}

您可以看到此JSBin的工作演示。

Answer 4

这会有用吗？

.popup {
  margin-top: -50%;
}

Answer 5

最后，我决定只将元素添加到DOM中，测量其高度，然后从顶部减去一半的高度。我在添加元素之前使元素不可见，并在调整高度后再次可见，以避免闪烁。

绝对定位元素基于中心

5 个答案: