html - Bootstrap 中的垂直居中搜索框

Question

背景:: 我在垂直对齐搜索框时遇到了一个真正的问题，这是一个棘手的问题，我已经处理了几个小时，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>   

注意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 的新手，而这个 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