如何居中動態生成的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>