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

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;
}

现在查看搜索框如何中心（小提琴）。我对CSS是相对陌生的，这是一个可以破解的坚果。有人可以告诉我我想念什么吗？

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

Alex-Z。

Answer 1

您无法组合position: absolute和display: table并获得您期望的结果。取而代

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

demo