如何将动态生成的div居中？

Question

我为我的javascript自动验证脚本生成一个div .它是使用以下代码生成的:

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

现在我如何以水平和垂直方式编程中心div？

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

谢谢

注意:作为参考,您可以在此处下载此脚本的最新版本.

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

 alertbox.style.position: whatever
 ....

Answer 1

这是应用与静态内容相同的CSS规则的问题.如本文所述,可以实现水平居中- 基本上你给div固定,并设置左右边距auto.垂直居中有点棘手 - 这里讨论了一些方法,并在本博文中详细介绍.

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

alertbox.className = "myCssClass";

更新: 由于你已经在使用JavaScript来创建div,你当然可以将它用于居中(与CSS绝对定位相结合) - 这实际上可能是一个更清晰的解决方案(由于CSS垂直的hackishness定心).究竟你是如何做到这一点取决于你正在使用什么工具 - 使用原型或jQuery等JS框架比用"原始"JavaScript更容易实现,因为浏览器处理窗口/浏览器高度有点不同.