我为我的javascript automated validation script 生成了一个 div。它是用下面的代码生成的：
var alertbox = document.createElement("div");
现在我如何以编程方式将 div 水平和垂直居中？
注意：目前我正在显示一个警告框，但是一旦我知道如何使 div 居中，我就会 用这个动态生成的 div 替换警报框，它也将提供一些 类似灯箱的效果。
谢谢
注意：供参考，您可以下载此脚本here的最新版本。
请注意，我不想为此使用外部 css，因为这是验证脚本，它应该能够以编程方式进行。例如： 使用这样的东西可能会有所帮助：
alertbox.style.position: whatever
....
【问题讨论】：
标签： php javascript jquery
这是一个应用与静态内容相同的 CSS 规则的问题。水平居中可以如this article 中所述实现 - 基本上你给 div 一个固定的 with 并将左右边距设置为 auto。垂直居中有点棘手——here 讨论了一些方法，this blog post 中有详细说明。
最简洁的方法可能是定义一个负责居中的 CSS 类，然后将该类应用于动态生成的元素，如下所示：
alertbox.className = "myCssClass";
更新： 由于您已经在使用 JavaScript 来创建 div，因此您当然也可以将其用于居中（结合 CSS 绝对定位）——这实际上可能是一个更干净的解决方案（由于 CSS 垂直居中的 hackishness） .具体如何执行此操作在一定程度上取决于您使用的工具 - 使用 Prototype 或 jQuery 等 JS 框架可能比使用“原始” JavaScript 更容易实现，因为浏览器处理窗口/浏览器高度的方式略有不同。
【讨论】：
如果你使用 jQuery，为什么不使用validation plugin？
您应该能够将它与模式窗口（如SimpleModal）结合起来。
但是如果你不想改变你已经做的，试试这样的：
我只是对 div 应用一些 CSS 规则来定位它（我已经包含了一个覆盖页面并将警报框放在顶部的叠加层）：
注意： div 位于最左侧的原因是因为您需要获取 div 的尺寸以及里面的内容。隐藏的 div 的高度和宽度为零。一旦确定了大小，它就会计算页面的中心并定位 div。
CSS
#overlay {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: #000;
opacity: 0.8;
filter: alpha(opacity=80);
z-index: 100;
}
#alertbox {
background: #444;
padding: 10px;
position: absolute;
left: -99999px;
top: 0;
z-index: 101;
}
脚本
function alertBox(alertMsg){
// Add overlay
$('<div id="overlay"></div>')
.hide()
.appendTo('body')
.fadeIn('slow');
// Add alert
$('<div id="alertbox"></div>')
.html(alertMsg)
.appendTo('body');
// calculate & position alertbox in center of viewport
var abx = $('#alertbox');
var abxTop = ($(window).height() - abx.height())/2;
var abxLft = ($(window).width() - abx.width())/2;
abx
.hide()
.css({ top: abxTop, left: abxLft })
.fadeIn('slow');
// add click to hide alertbox & overlay
$('#overlay, #alertbox').click(function(){
$('#overlay, #alertbox').fadeOut('slow',function(){
$('#alertbox').remove();
$('#overlay').remove();
});
})
}
【讨论】：
无论出于何种原因，我都无法使用margin-right 和margin-left 将DIV 居中。我发现更好的方法是将它们封装在一个表中（这有点像 globby 代码，但它对我有用）。您可以使用 DOM 样式对象来修改边距，如下所示：
<table style="margin-left:auto;margin-right:auto;"><tr><td><div id="yourdiv"></div></td></tr></table>
【讨论】：