在包含许多其他 div 的容器 div 中居中搜索栏

Question

我有一个容器 div，其中包含许多其他 div，并且在其中一个 div 中有一个搜索栏。因此 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;
}

div 主要是为了样式而存在的，它们使用图像作为背景，因此覆盖它们的搜索栏没有任何害处。但是，我需要它以包含 div 为中心，并覆盖其余部分的一小部分。任何帮助将不胜感激。也将不胜感激有关一般 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。

如果搜索框和容器 div 的宽度和高度是静态的，则可以使用精确像素进行居中。这不是最好的方法，但它应该有效。如果它们是动态的，那么您可以使用 javascript 进行计算。

http://jsfiddle.net/rWNkj/