中心搜索栏在包含许多其他部门的容器Div中

Question

i有一个容器div，其中包含许多其他divs，并且在一个divs中，一个搜索栏。因此，HTML看起来像这样：

   <div id="header-middle">
        <div id="header-search">
            <form>
                <input type="text">
            </form>
        </div>
        <div id="header-middle-left">
        </div>
        <div id="header-transition">
        </div>
        <div id="header-middle-right">
        </div>
    </div>

我拥有的CSS是：

#header-middle{
    width: 400px;
    height: 64px;
    float: left;
}
#header-search{
    position: absolute;
    left: 50%;
    top: 50%;    
    margin-top: -32px;
    margin-left: -200px;
}
#header-middle-left{
    width: 241px;
    height: 64px;
    float: left;
    background-image:url('foo');
    background-repeat:repeat-x;
}
#header-transition{
    width: 19px;
    height: 64px;
    float:left;
    background-image:url('foo2');
}
#header-middle-right{
    width: 140px;
    height: 64px;
    float:left;
    background-image:url('foo3');
    background-repeat:repeat-x;
}

divs主要是为了风格，它们使用图像作为背景，因此覆盖它们的搜索栏中没有任何伤害。但是，我需要将其集中在contingdiv中，并覆盖其余部分。任何帮助将不胜感激。同样，对CSS的任何建议也将不胜感激。

Answer 1

您应该编辑您的CSS以实现此目标，更改#header-middle和#header-search以使用以下代码：

#header-middle {
    width: 400px;
    height: 64px;
    position: relative;
}
#header-search {
    position: absolute;
    left: 50%;
    top: 50%;    
    margin-top: -11px;
    margin-left: -75px;
    width: 150px;
    height: 22px;
}

这是 demo 。

Answer 2

您可以使用position:relative用于#header-search将其位置相对于容器Div #header-middle。

为中心，您可以使用精确像素，如果宽度＆amp;搜索框的高度和容器div是静态的。这不是最好的方法，但应该起作用。如果它们是动态的，那么您可以通过JavaScript计算。

http://jsfiddle.net/rwnkj/