位于div中间的对中模式窗口 我试图在一个外部div的中间（垂直和水平）中间放置一个模态对话框窗口。我使用一个jQuery插件来进行模态窗口。这是一张我正在努力完成的图片

正如您可以看到的，在我的当前代码中，它几乎居中，但并不安静。这是我的javascript代码

$(id).css('top', $('#pagecontent').position().top + ($('#pagecontent').height() / 2) - ($(id).height() / 2));
$(id).css('left', $('#pagecontent').position().left + ($('#pagecontent').width() / 2) - ($(id).width() / 2));

pagecontent是div矩形，我试图在其中居中模式窗口

任何帮助都将不胜感激

提前谢谢

---

Carlos

尝试以下操作：首先，使用

相对位置设置父元素：

#pagecontent {position:relative;}

然后，将模式窗口设置为
绝对
位置，该位置也有
顶部
和
左侧
值​​通过
50%
：

#modal {
  position:absolute;
  top:50%;
  left:50%;
}

最后，只需根据模式窗口的
高度
和
宽度
除以二，设置模式窗口的
页边距顶部
和
页边距左侧
（负数）：

$id.css({
    'margin-top': -($id.outerHeight() / 2),
    'margin-left': -($id.outerWidth() / 2)
});

演示：
如果没有上面提到的图片或到现场的链接，就很难提供准确的答案

尽管如此，通过查看代码，您可以将元素居中，但您没有考虑任何可能应用于元素或其父元素的
边距
或
填充


实例：
让我们假设应用您的代码并进行必要的更正：

假设以下标记：

<div id="pagecontent">
  <div id="foobar">I'm at the very middle!</div>
</div>

#pagecontent {
  margin: 10px;
  padding: 10px;
  height: 240px;
  width: 360px;
  border: 1px solid #D9D9D9;
  position: relative;
}

#foobar {
  position: absolute;
  width: 200px;
  height: 20px;
  line-height: 20px;
  border: 1px solid blue;
}

var $inner   = $('#foobar'),
    $wrapper = $('#pagecontent');

$inner.css({
    'top'  : ($wrapper.outerHeight() / 2) - ($inner.outerHeight(true) / 2),
    'left' : ($wrapper.outerWidth() / 2) - ($inner.outerWidth(true) / 2)
});

您的jQuery代码可以改进为：

<div id="pagecontent">
  <div id="foobar">I'm at the very middle!</div>
</div>

#pagecontent {
  margin: 10px;
  padding: 10px;
  height: 240px;
  width: 360px;
  border: 1px solid #D9D9D9;
  position: relative;
}

#foobar {
  position: absolute;
  width: 200px;
  height: 20px;
  line-height: 20px;
  border: 1px solid blue;
}

var $inner   = $('#foobar'),
    $wrapper = $('#pagecontent');

$inner.css({
    'top'  : ($wrapper.outerHeight() / 2) - ($inner.outerHeight(true) / 2),
    'left' : ($wrapper.outerWidth() / 2) - ($inner.outerWidth(true) / 2)
});


进一步解释：
要使用jQuery收集元素宽度和高度，同时获取填充和边距声明占用的空间，可以使用：

jQuery函数：

说明：获取匹配元素集中第一个元素的当前计算宽度，包括填充和边框

.外层宽度（[includeMargin]）

includeMargin一个布尔值，指示是否在计算中包含元素的边距


jQuery函数：

说明：获取匹配元素集中第一个元素的当前计算高度，包括填充、边框和可选边距。返回值的整数（不带“px”）表示形式，如果对空元素集调用，则返回null

.outerHeight（[includeMargin]）

includeMargin一个布尔值，指示是否在计算中包含元素的边距

作为新用户，您可能还不允许在问题中发布图片。如果你发布了你想添加到问题中的图像的URL，我将代表你对其进行编辑。我建议对你的答案进行以下编辑：
位置：固定的
而不是绝对的，并添加
z-index:9999
@freshyeball:我不这么认为，正如上面的问题：“我试图在一个外部div的中间（垂直和水平）中间设置一个模态对话框窗口。”代码>固定< /代码>位置将破坏模态位置并基于屏幕移动位置，而不是基于父元素。<代码> z索引< /代码>，很好。@ TauF修正我的坏。只有<代码> Z索引< /代码>。