Css – How to align js clock to center of page

centercssimage

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.

HTML

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

CSS

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