How to correctly use DOM style margin top property in javascript?

Question

I am trying to get my div element to the center of the screen that I have aligned to the center but the top margin is still stuck on the top and not centered.

I have tried divElement.style.marginTop = "100px"; but that didn't change anything.

//this is the javascript

function stopDesc(){
var divElement = document.createElement("Div");
divElement.id = "divID";

// Styling it
divElement.style.textAlign = "center";
divElement.style.fontWeight = "bold";
divElement.style.fontSize = "smaller";
//divElement.style.marginTop = "100px";
divElement.style.paddingTop = "100px";
divElement.style.width = "500px";
divElement.style.height = "250px";
divElement.style.background = "orange";
divElement.style.margin="0 auto";
divElement.style.color = "white";
divElement.style.position="relative";
divElement.style.zIndex="1000";

// Adding a paragraph
var paragraph = document.createElement("P");
var text = 
document.createTextNode("Text..................................");
paragraph.appendChild(text);
divElement.appendChild(paragraph);

// Adding a button
var button = document.createElement("Button");
var textForButton = document.createTextNode("Next->");
button.appendChild(textForButton);
button.addEventListener("click", function(){
  alert("Hi!");
});
divElement.appendChild(button);

// Appending the div element to body
document.getElementsByTagName("body")[0].appendChild(divElement);
//document.getElementById("divID").setAttribute('align','center');
}

Right now the div is centered but the top is stuck to the top of the screen and I want it in the center or at least 100px down from the top.

Answer 1

Edit this line:

divElement.style.margin="0 auto";

and make it:

divElement.style.margin="100px auto";

maybe you've added divElement.style.marginTop = "100px" above that line of code so that it was overriden.

 var divElement = document.createElement("Div"); divElement.id = "divID"; // Styling it divElement.style.textAlign = "center"; divElement.style.fontWeight = "bold"; divElement.style.fontSize = "smaller"; //divElement.style.marginTop = "100px"; divElement.style.paddingTop = "100px"; divElement.style.width = "500px"; divElement.style.height = "250px"; divElement.style.background = "orange"; divElement.style.margin="100px auto"; divElement.style.color = "white"; divElement.style.position="relative"; divElement.style.zIndex="1000"; // Adding a paragraph var paragraph = document.createElement("P"); var text = document.createTextNode("Text.................................."); paragraph.appendChild(text); divElement.appendChild(paragraph); // Adding a button var button = document.createElement("Button"); var textForButton = document.createTextNode("Next->"); button.appendChild(textForButton); button.addEventListener("click", function(){ alert("Hi!"); }); divElement.appendChild(button); // Appending the div element to body document.getElementsByTagName("body")[0].appendChild(divElement); //document.getElementById("divID").setAttribute('align','center');