Question

Backgroud :: 我有一个真正的问题，垂直对齐一个搜索框，它是一种难以破解的坚果，我已经在这几个小时，HTML标记是干净的，看看吧::

问题:: 我一直在使用display:table和display:table-cell属性让搜索框垂直对齐，看一下标记：

<header>
    <img src="http://www.freestockphotos.name/wallpaper-original/wallpapers/download-images-of-gentle-dogs-6866.jpg" alt="image of laminates"> 
            <div class="location-search-container">
                <div class="input-group custom-search-form">
                    <input type="text" class="form-control">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button">
                                <span class="glyphicon glyphicon-search"></span>
                        </button>
                     </span>
                 </div><!-- /input-group -->    
            </div>

</header>

请注意，标头为position:relative，img为display:block，location-search-container是难度所在，其位置绝对且应用了以下CSS ::

.location-search-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: table;
    height: 100%;
}

理论上搜索框应位于中间，但不是，请在 FIDDLE ::

中查看结果

现在，稍微调整一下，让我们删除图像元素并将以下附加属性添加到header元素::

header {
    position: relative;
    /*add the below two properties*/
    height: 300px;
    background: yellow;
}

现在查看搜索框的中心位置（ FIDDLE ）。我对CSS来说相对比较新，而且这个问题很难解决。谁能告诉我我错过了什么？

我知道这需要付出一些努力，所以，谢谢你的时间和耐心。

亚历-Z。

Answer 1

您无法合并position: absolute和display: table并获得您期望的结果。相反，在搜索框上设置50％的顶部位置和负的上边距等于其高度的一半：

.location-search-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.input-group {
    position: absolute;
    top: 50%;
    margin-top: -17px;
}

<强> Demo

在引导程序中垂直居中搜索框

1 个答案: