title: How to center a DIV created by Javascript?
body: <p>Here is my code for a counter (modified from www.w3schools.com code).</p>
  
  <p>I'm struggling to horizontally center the output. I have tried to wrap in a DIV and then use the following techniques to center that DIV, but no success, any pointers appreciated:</p>
  
  <ol>
  <li>Using CSS to style the outside DIV with <code>text-align: center;</code></li>
  <li>Using CSS to style the outside DIV with <code>margin-left: auto;</code> &amp; <code>margin-right:auto;</code></li>
  <li>Using Javascript to set the <code>margin</code> property of the output horizontally align;</li>
  </ol>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;style&gt;
          .bigger {
              text-align: center;
              font-size: 1.35em;
          }
          .counter_p {
              text-align: center;
              font-size: 6em;
              padding: 0px 0px 0px 0px;
              line-height: 1em;
          }
          .counter_label {
              font-size: 0.2em;
              line-height: 1em;
          }
  
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="counter_p" id="counter"&gt;&lt;/div&gt;
      &lt;script&gt;
          function pad(str, max) {
              return str.length &lt; max ? pad("0" + str, max) : str;
          }
  
          // Set the date we're counting down to
          var countDownDate = new Date("Sep 1, 2017 15:37:25").getTime();
  
          // Update the count down every 1 second
          var x = setInterval(function() {
  
              // Get todays date and time
              var now = new Date().getTime();
  
              // Find the distance between now an the count down date
              var distance = countDownDate - now;
  
              // Time calculations for days, hours, minutes and seconds
              var days = pad(String(Math.floor(distance / (1000 * 60 * 60 * 24))),2);
              var hours = pad(String(Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))),2);
  
              var minutes = pad(String(Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))),2);
              var seconds = pad(String(Math.floor((distance % (1000 * 60)) / 1000)),2);
  
  
              // My attempt at horizontally centering the output
              document.getElementById('counter').style.margin = '0 auto';
  
              // Output the result in an element with id="counter"
              document.getElementById("counter").innerHTML =
                  "&lt;div style='text-align:center'&gt;"
                  +   "&lt;table border='0'&gt;"
                  +       "&lt;tr&gt;"
                  +           "&lt;td&gt;"
                  +               "&lt;div&gt;"+ days + "&lt;/div&gt;"
                  +               "&lt;div class='counter_label'&gt;Days&lt;/div&gt;"
                  +           "&lt;/td&gt;"
                  +           "&lt;td class='bigger'&gt;|&lt;/td&gt;"
                  +           "&lt;td&gt;"
                  +               "&lt;div&gt;" + hours + "&lt;/div&gt;"
                  +               "&lt;div class='counter_label'&gt;Hours&lt;/div&gt;"
                  +           "&lt;/td&gt;"
                  +           "&lt;td class='bigger'&gt;|&lt;/td&gt;"
                  +           "&lt;td&gt;"
                  +               "&lt;div&gt;" + minutes + "&lt;/div&gt;"
                  +               "&lt;div class='counter_label' &gt;Mins&lt;/div&gt;"
                  +           "&lt;/td&gt;"
                  +           "&lt;td class='bigger'&gt;|&lt;/td&gt;"
                  +           "&lt;td&gt;"
                  +               "&lt;div&gt;" + seconds + "&lt;/div&gt;"
                  +               "&lt;div class='counter_label'&gt;Secs&lt;/div&gt;"
                  +           "&lt;/td&gt;"
                  +           "&lt;td&gt;"
                  +       "&lt;/tr&gt;"
                  +   "&lt;/table&gt;"
                  +"&lt;/div&gt;";
  
  
              // If the count down is over, write some text
              if (distance &lt; 0) {
                  clearInterval(x);
                  document.getElementById("counter").innerHTML = "Countdown is complete";
              }
          }, 1000);
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>