在 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

没有提到的图片或实时网站的链接，很难提供准确的答案。

尽管如此，通过查看您的代码，您正在使元素居中，但您没有考虑可能应用于它或其父元素的任何 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()函数：

描述： 获取匹配元素集中第一个元素的当前计算高度，包括内边距、边框和可选的边距。返回值的整数（不带“px”）表示，如果在一组空元素上调用，则返回 null。

.outerHeight( [includeMargin] )

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

Answer 2

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

#pagecontent {position:relative;}

然后，通过50%设置absolute位置也有top和left值的模态窗口：

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

最后，只需将模态窗口的margin-top 和margin-left（负数）设置为基于它的height 和width 除以二：

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

演示： http://jsfiddle.net/tovic/2QVX8/24/