Как вертикально и горизонтально центрировать это поле ввода в контейнере

Question

Я пытаюсь горизонтально и вертикально центрировать это поле ввода внутри контейнера (зеленый ящик)

Есть ли способ сделать это без техники CSS3 Flexbox?

Все, что я пробовал, включая обычные методы центрирования, маржу и авто, а позиционирование не работает.

Ну, проблема с позиционированием в том, что она действительно работает, но должен быть лучший способ ее перемещения.

Любые идеи?

Вот страница: https://dl.dropboxusercontent.com/u/270523/help/new.html

Я пытаюсь центрирование входа с #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; }