Центр выровнять div с фиксированным верхом

Question

У меня есть таблица, содержащая 3 кнопки в верхней части моей страницы. У меня также есть div (ниже этой таблицы), и я хотел бы разместить это в середине экрана. Я написал этот код:

#walkthrough { 
    position: absolute; 
    margin: auto; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    width: 85%; 
    height: 150px; 
    border: 1px solid #000000; 
    border-radius: 6px 6px 6px; 
    -moz-border-radius: 6px 6px 6px 6px; 
    -webkit-border-radius: 6px 6px 6px 6px; 
} 

Тогда у меня есть элемент вроде этого: <div id="walkthrough"> test </div>. Этот div выравнивается по центру в соответствии с шириной моего экрана, и все в порядке.

Кстати, глядя на высота, div выравнивается по центру со всем размером экрана, но я должен рассмотреть панель с кнопками. JSFiddle.

Если высота моего div слишком велика, она проходит через кнопки, и я не хочу, чтобы это произошло. This фото показывает, что является результатом, this показывает, что я пытаюсь получить.

Мне нужен центр div, выровненный по высоте, но не переходя через кнопки.

Любые идеи?

Answer 1

absolute Позиционированный элемент будет удален из нормального потока документа и будет размещен в точном месте на странице. Он также выводится из обычного потока документа - это не повлияет на то, как элементы, находящиеся перед ним или после него в HTML, размещаются на веб-странице.

Использование

#walkthrough { 
    position: relative; 
} 

Вместо

#walkthrough { 
     position: absolute; 
    } 

FIDDLE DEMO

Answer 2

Измените верхнюю навигацию из таблицы (не следует делать этого) вместо ul. Затем сделайте div position: relative