Css – How to align js clock to center of page


How do I align a javascript countdown box to the center of the page? The url is where the js is located is http://www.freelanceseohelp.com/offer/mobile/index.html

I tried aligning the following but I'm having problems:

.flip-clock-wrapper {

I tried adding the above to

<div class="clock"></div> 

Any help fixing this will be appreciated. Thanks.

Best Solution

I'm pretty late to the party here but the following works for me at the time of writing (Version: 0.7.4 Beta). The idea is to wrap it in a container and override some of it's CSS.


<div class="container">
    <div class="flip-clock"></div>
    <!-- Flip clock is attached the this element, not .container -->


.container {
    text-align: center;

.flip-clock {
    display: inline-block;
    width: auto;

By default .flip-clock has width: 100% and display: block. By setting width: auto and display: inline-block the item no longer spans the width of it's parent and is able to be centered by adding text-align: center to it's container.