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

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