Aligning a responsive div center

[gmbblokus]

Within the structure below what is the best way to be able to align the \[code\]div#logo\[/code\] into the middle of the \[code\]grid_12 visible\[/code\] div for only non mobile devices. Can I create a custom piece of code to override the above classes? I have created a Plunker with my code - http://plnkr.co/edit/lrRm0nXdYaz5g7dYe4DSHTML: \[code\]<header class="row visible"> <div class="grid_12 visible"> <div class="row logo-wrap"> <!-- logo --> <div class="grid_6"> <div id="logo"> <a href="http://dev.jzm.co.nz/mytime/"><img src="http://dev.jzm.co.nz/mytime/image/data/logo-black-web.png" title="My Time Candles" alt="My Time Candles" /></a> </div> </div> <!-- search --> <div class="grid_6 visible"> <div id="search"> <div class="button-search">Search</div> <input type="text" name="filter_name" value="http://stackoverflow.com/questions/15583430/Search ..." onclick="this.valuehttp://stackoverflow.com/questions/15583430/= '';" onkeydown="this.style.color = '#000000';" /> </div><!--/search--> </div> </div><!--/row--> </div><!--/grid_12--></header><!--End Header-->\[/code\]