Html 调整快速响应的div中心

在下面的结构中，能够将

div#徽标

对齐到

grid_12可见的中间位置的最佳方法是什么？仅适用于非移动设备

我可以创建一段自定义代码来覆盖上述类吗

我用我的代码创建了一个Plunker-

HTML:

<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="Search ... " onclick="this.value = '';" onkeydown="this.style.color = '#000000';" />
                                    </div><!--/search-->
            </div>

        </div><!--/row-->  
    </div><!--/grid_12-->
</header><!--End Header-->


搜寻
为标识为logo的div指定一个宽度，并将其左边距和右边距css属性设置为“自动”。。此外，将最大宽度设置为100%将确保响应性能

#logo{
  width: 100%;
  max-width: 300px; /* Original width of the logo image */ 
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  float: left;
}

我希望你已经这么做了但是

#logo img{ 
   max-width: 100%;
   height: auto;
}

更新：

像这样修改标记

<div id="container-top">
    <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>
<!-- search -->
    <div id="search" class="visible">
        <div class="button-search">Search</div>
        <input type="text" name="filter_name" value="Search ... " onclick="this.value = '';" onkeydown="this.style.color = '#000000';">
    </div>
<!--/search-->
</div>

#container-top{
    position: relative;
}

#search{
    top: 15%;
    right: 0;
}


搜寻
#集装箱顶部{
位置：相对位置；
}
#搜寻{
最高：15%；
右：0；
}

但是，当布局发生变化时，您必须使用媒体查询来调整#搜索css。。
此外，我在上面做了一些CSS更改（在更新部分之前）
只需写一行
边距：0 auto

#logo
{
    margin:0 auto;
}

谢谢，但是当我把它做得比300px大的时候，它会回到左边，为什么？我想把它集中在<代码>中间的GRIDY12可见的< /代码> DIVSEE链接中，或者对我来说它很好用。它总是以答案I gave为中心，如果你想把它放在“代码>红色背景< /代码>内，也就是当你设置的高度大于徽标图像的原始高度，然后添加<代码>文本对齐：中心< /代码>到<代码>标签> <代码>时，我希望它在包含标识和搜索的div的中间居中。