如何居中动态生成的div？

Question

我为我的JavaScript自动验证脚本生成了一个div。 它是使用以下代码生成的：

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

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

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

谢谢

注意：作为参考，您可以在此处下载此脚本的最新版本。

请注意，我不想为此使用外部CSS，因为这是验证脚本，它应该能够以编程方式进行。 例如：使用类似的方法可能会有所帮助：

 alertbox.style.position: whatever
 ....

Answer 1

这是要应用与静态内容相同的CSS规则的问题。 如本文所述，可以实现水平居中-基本上，您将div固定为，并将左边距和右边距设置为auto 。 垂直居中是有点麻烦-一些方式进行了讨论这里 ，详细在这本博客帖子 。

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

alertbox.className = "myCssClass";

更新：由于您已经在使用JavaScript创建div，因此当然也可以将其用于居中（与CSS绝对定位结合使用）-实际上，这可能是一种更简洁的解决方案（由于CSS垂直处理的笨拙性）定心）。 确切地说，您如何执行此操作取决于您所使用的工具-使用Prototype或jQuery之类的JS框架比使用“原始” JavaScript来实现要容易得多，因为浏览器对窗口/浏览器高度的处理略有不同。

Answer 2

如果您使用的是jQuery，为什么不使用验证插件 ？

您应该能够将其与模式窗口（如SimpleModal ）组合。

但是，如果您不想更改已经完成的操作，请尝试以下操作：

我只将一些CSS规则应用于div即可将其定位（我包括一个覆盖页面的覆盖层，并将警报框放在顶部）：

注意 ：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();
   });
  })
}

Answer 3

无论出于什么原因，我都无法使用margin-right和margin-left来使DIV margin-left 。 我发现更好的方法是将它们封装在表中（这有点笨拙的代码，但是对我有用）。 您可以使用DOM样式对象按如下所示修改边距：

<table style="margin-left:auto;margin-right:auto;"><tr><td><div id="yourdiv"></div></td></tr></table>