How to center align a span followed by a div in a div

I have the following code and I want to center align span and div inside parent div. How can i achieve it? If I give left and absolute position, on tablets the alignment changes and need to go for media query. Without that, is there any way I can fix it?

<div>
    <span  data-toggle="toggle">
        <input class="button" data-on="On" data-off="Off" type="checkbox">
        <div class="toggle-group">
            <label class="btn btn-primary toggle-on">
                On
            </label>
            <label class="btn btn-default toggle-off active">
                Off
            </label>
            <span class="toggle-handle btn btn-default"></span>
        </div>
    </div>
</div>

Use text-align: center

.wrapper > span{display:block; text-align:center}
.wrapper > div{text-align:center}
.wrapper > div > div{display: inline-block}

Demo updated

To get child span and div in single line

.wrapper{text-align:center}
.wrapper div{display:inline-block}

Demo 2