title: Horizontally center object inside DIV
body: <p>I am trying to center a button inside a div horizontally but am having no luck:</p>
  
  <pre><code>var x = document.createElement("div"); // the div container
  x.style.backgroundColor = "red";
  x.style.width = "200px";
  x.style.height = "200px";   
  document.body.appendChild(x);
  
  var y = document.createElement("input"); // the button to be centered inside div "x"
  y.type = "button";
  y.value = "test button";
  y.style.marginLeft = "auto";
  y.style.marginRight = "auto";
  x.appendChild(y);
  </code></pre>
  
  <p>I tried doing <code>y.style.textAlign = "center"</code>, <code>"y.style.margin = "auto 0"</code>. What am I doing wrong?</p>
  
  <p><a href="http://jsfiddle.net/5tffD/1/" rel="nofollow">http://jsfiddle.net/5tffD/1/</a></p>