How to center a DIV created by Javascript?

Question

Here is my code for a counter (modified from www.w3schools.com code).

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:

Using CSS to style the outside DIV with text-align: center;
Using CSS to style the outside DIV with margin-left: auto; & margin-right:auto;
Using Javascript to set the margin property of the output horizontally align;

<!DOCTYPE HTML>
<html>
<head>
    <style>
        .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;
        }

        }
    </style>
</head>
<body>
    <div class="counter_p" id="counter"></div>
    <script>
        function pad(str, max) {
            return str.length < 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 =
                "<div style='text-align:center'>"
                +   "<table border='0'>"
                +       "<tr>"
                +           "<td>"
                +               "<div>"+ days + "</div>"
                +               "<div class='counter_label'>Days</div>"
                +           "</td>"
                +           "<td class='bigger'>|</td>"
                +           "<td>"
                +               "<div>" + hours + "</div>"
                +               "<div class='counter_label'>Hours</div>"
                +           "</td>"
                +           "<td class='bigger'>|</td>"
                +           "<td>"
                +               "<div>" + minutes + "</div>"
                +               "<div class='counter_label' >Mins</div>"
                +           "</td>"
                +           "<td class='bigger'>|</td>"
                +           "<td>"
                +               "<div>" + seconds + "</div>"
                +               "<div class='counter_label'>Secs</div>"
                +           "</td>"
                +           "<td>"
                +       "</tr>"
                +   "</table>"
                +"</div>";


            // If the count down is over, write some text
            if (distance < 0) {
                clearInterval(x);
                document.getElementById("counter").innerHTML = "Countdown is complete";
            }
        }, 1000);
    </script>
</body>
</html>

If you want to center the text "Coutdown is complete" just do this `document.getElementById("counter").innerHTML = "
Countdown is complete
"` — Hail Hydra, Aug 18 '17 at 20:20

score 0 · Answer 1 · answered Aug 18 '17 at 20:20

below, are steps to find the center of a div with JS. it will be best to attach that to on window resize event. so it will move as user change window size.

//create div via js

var div = document.createElement("div");
document.body.appendChild(div);

//find widow width

var winWidth = document.documentElement.clientWidth; 

//find div width 

var divWidth = div.offsetWidth;

//find center position 

var centerPos = (winWidth/2) - (divWidth/2)

//put div at position 

div.style.marginLeft = centerPos+'px';

div {
  height: 100px; 
  width: 100px; 
  background-color: red;
}

Thanks - works for me, only reason not accepted is that I have accepted Advaits answer as was slightly easier for me to implement. Tks again — BenH70, Aug 18 '17 at 20:50

Advait · Accepted Answer · 2017-08-18T20:27:05.813

Creating a container div to hold the countdown text works in this case (using the CSS flexbox with justify-content set to "center") - flexbox works correctly on window resize:

<!DOCTYPE HTML>
    <html>
    <head>
    <style>


    .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;
    }
    .container {
      display: flex;
      justify-content: center;
    }

    }
    </style>
    </head>
    <body>
    <div class="container">
        <div class="counter_p" id="counter"></div>
    </div>
    <script>

      function pad (str, max) {
          return str.length < 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);

        // Output the result in an element with id="counter"

    document.getElementById("counter").innerHTML = "<div style='text-align:center'><table border='0'><tr><td><div>"+ days + "</div><div  class='counter_label' >Days</div></td><td class='bigger'>|</td><td><div>" + hours + "</div><div class='counter_label'>Hours</div></td><td class='bigger'>|</td><td><div>"
        + minutes + "</div><div class='counter_label' >Mins</div></td><td class='bigger'>|</td><td><div>" + seconds + "</div><div class='counter_label'>Secs</div></td><td></tr></table></div>";



        // If the count down is over, write some text 
        if (distance < 0) {
            clearInterval(x);

    document.getElementById("counter").innerHTML = "Countdown is complete";
        }
    }, 1000);
    </script>

    </body>
    </html>

Note: CSS Flexbox is not supported in older browsers, see CSS Flexible Box Layout Module

score 0 · Answer 3 · answered Aug 18 '17 at 20:36

Your issue is simply the usual question of centering with css. I recommend you get familiar with this notion because it comes a lot when programming web interfaces.

This is some topic on the subject:

I also invite you to look for youtube video:

https://www.youtube.com/watch?v=hIG-fZ2042k

My solution

use a class to center (equivalent to your second idea)

.centered {
  display: table;
  margin: 0 auto;
}

margin: 0 auto; works only if you div as a width or display table.

          function pad (str, max) {
              return str.length < 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 = "<div class='centered'><table border='0'><tr><td><div>"+ days + "</div><div  class='counter_label' >Days</div></td><td class='bigger'>|</td><td><div>" + hours + "</div><div class='counter_label'>Hours</div></td><td class='bigger'>|</td><td><div>"
            + minutes + "</div><div class='counter_label' >Mins</div></td><td class='bigger'>|</td><td><div>" + seconds + "</div><div class='counter_label'>Secs</div></td><td></tr></table></div>";



            // If the count down is over, write some text 
            if (distance < 0) {
                clearInterval(x);

        document.getElementById("counter").innerHTML = "Countdown is complete";
            }
        }, 1000);

#counter{
  border: 3px solid red;
}

.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;
}

.centered {
  border: 3px solid blue;
  display: table;
  margin: 0 auto;
}

<div class="counter_p" id="counter"></div>

How to center a DIV created by Javascript?

3 Answers3

My solution