在div的中间居中模态窗口

Question

我试图将一个模态对话框窗口置于外部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矩形，我试图将模态窗口置于中心

非常感谢任何帮助。

提前致谢 卡洛斯

Answer 1

试试这个：首先，将父元素设置为relative位置：

#pagecontent {position:relative;}

然后，将模态窗口设置为absolute位置，top和left值50%：

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

最后，只需根据margin-top和margin-left除以2来设置模态窗口的height和width（负数）：

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

DEMO： http://jsfiddle.net/tovic/2QVX8/24/

Answer 2

如果没有上述图片或指向实际网站的链接，很难提供准确的答案。

尽管如此，通过查看代码，您可以将元素集中在一起，但是您没有考虑可能应用于它或其父级的任何margin或padding。

---

实际示例：

让我们假设following example将您的代码应用于必要的更正：

假设以下标记：

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

使用以下CSS：

#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;
}

您的jQuery代码可以改进为：

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 .outerWidth()功能：

  

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

     

.outerWidth（[includeMargin]）

     

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

jQuery .outerHeight()功能：

  

描述：获取匹配元素集中第一个元素的当前计算高度，包括填充，边框和可选边距。返回一个整数（没有＆＃34; px＆＃34;）表示的值，如果在一组空元素上调用，则返回null。

     

.outerHeight（[includeMargin]）

     

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