如何在此容器中垂直和水平居中此输入字段

Question

我试图将此输入字段水平和垂直居中于其容器（绿色框）

中

有没有办法在没有CSS3 flexbox技术的情况下做到这一点？

我尝试的所有内容包括正常的居中技巧，边距和自动以及定位都不起作用。

嗯，定位的问题在于它确实有效，但必须有更好的方法来降低它。

有什么想法吗？

以下是页面：https://dl.dropboxusercontent.com/u/270523/help/new.html

我正在尝试使用id #searchInput

来居中输入

Answer 1

将position: relative添加到剖面容器中，然后使用绝对定位来垂直居中对齐输入字段，使用输入高度的一半的负边距：

#input {
    position: relative;
}

#searchInput {
    position: absolute;
    top: 50%;
    margin-top: -0.809rem;
}

Answer 2

您可以这样做：

<div style="display:table;">
    <div style="display:table-cell;vertical-align:middle;text-align:center;">centered box</div>
</div>

JSFiddle：http://jsfiddle.net/V8GUn/

Answer 3

尝试将此添加到您的代码中

#searchInput { margin-top: 5px; }