php - 如何居中动态生成的div？

Question

我为我的 javascript automated validation script 生成一个 div .它是用下面的代码生成的:

var alertbox = document.createElement("div");

现在如何以编程方式使该 div 在水平和垂直方向居中？

注意:目前我正在显示一个警告框，但是一旦我知道如何将 div 居中，我就会用这个动态生成的 div 替换警报框，它也将提供一些类似灯箱的效果。

谢谢

注意:作为引用，您可以下载此脚本的最新版本here .

请注意，我不想为此使用外部 css，因为这是验证脚本，它应该能够以编程方式执行。例如:使用这样的东西可能会有所帮助:

 alertbox.style.position: whatever
 ....

Answer 1

这是应用与静态内容相同的 CSS 规则的问题。可以按照 this article 中的描述实现水平居中。 - 基本上你给 div 一个固定的，并将左右边距设置为 auto。垂直居中有点棘手 - 讨论了一些方法 here并在此 this blog post 中详细说明.

最简洁的方法可能是定义一个负责居中的 CSS 类，然后将该类应用于动态生成的元素，如下所示:

alertbox.className = "myCssClass";

更新:由于您已经在使用 JavaScript 创建 div，因此您当然也可以将它用于居中(结合 CSS 绝对定位)——这实际上可能是一个更简洁的解决方案(由于 CSS 垂直居中的 hackishness) .具体如何执行此操作取决于您使用的工具 - 使用 Prototype 或 jQuery 等 JS 框架可能比使用“原始”JavaScript 更容易实现，因为浏览器处理窗口/浏览器高度的方式略有不同。