如何居中对齐跨度后跟div中的div(How to center align a span followed by a div in a div)

我有以下代码，我想在父div中居中对齐span和div。 我怎样才能实现它？ 如果我给出左侧和绝对位置，则在平板电脑上对齐会发生变化，需要进行媒体查询。 没有它，有什么办法可以解决它吗？

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

                
最满意答案
                
                    
                        
 使用text-align: center 
 
.wrapper > span{display:block; text-align:center}
.wrapper > div{text-align:center}
.wrapper > div > div{display: inline-block}
 
 演示更新 
 
 
 以单行为单位获得子跨度和div 
 
.wrapper{text-align:center}
.wrapper div{display:inline-block}
 
 演示2 
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