九宫格内的内容如何放到中间

效果如图，改的九宫格案例，想问问大家怎么把图标居中呢？

<div class="mui-content maindiv-layer" style=" background-color: transparent; position: fixed; padding-top: 200px;height: 60%;">  
                <ul id="grid_main" class="mui-table-view mui-grid-view mui-grid-9" style="background-color: transparent; margin-top:0px; height: 100%;">  
                <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-12">  
                    <a href="#">  
                        <div class="mui-switch">  
                            <div class="mui-switch-handle"></div>  
                    </a>  
                </li>  
                <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-12">  
                    <a href="#">  

                    </a>  
                </li>  
                <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-12">  
                    <a href="#">  
                        <span class="mui-icon mui-icon-bars"></span>  
                        <div class="mui-media-body">模式</div>  
                    </a>  
                </li>  
                <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-12">  
                    <a href="#">  

                    </a>  
                </li>  
                <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-12">  
                    <a href="#">  
                        <div class="mui-numbox" data-numbox-step='1' data-numbox-min='0' data-numbox-max='100'>  
                        <!-- "-"按钮，点击可减小当前数值 -->  
                        <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>  
                        <input class="mui-input-numbox" type="number" />  
                        <!-- "+"按钮，点击可增大当前数值 -->  
                        <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>  
                        </div>  
                    </a>  

                    </ul>