Вертикально и горизонтально центрирование HTML5 Javascript

Question

Итак, у меня есть это и я хочу центрировать его по вертикали и горизонтали:

<div id="hd_hype_container" style="position:relative;overflow:hidden;width:600px;height:405px;">
    <script type="text/javascript" charset="utf-8" src="hd/hd.js?88618"></script>
</div>

Я испробовал каждое решение, и, похоже, ни одно из них не работает для меня.Нужно ли что-то добавить в js?

Буду признателен за любую помощь.

Спасибо.

Answer 1

Попробуйте:

#hd_type_container {
    position: absolute;
    top: 50%;
    height: 50%;
    width: whatever;
    height: whatever; 
    margin-left: -whatever_width_is / 2;
    margin-top: -whatever_height_is / 2;
}

Помните, что абсолютные или относительно позиционированные элементы располагаются относительно «ближайшего» родительского контейнера, который также является абсолютным или относительно позиционированным.

Другими словами, если ваш div является дочерним по отношению к какой-либо другой div, которая абсолютно позиционирована, вы не будете центрироваться на экране, а сосредоточены на родительском div.

Обновление: если вы пытаетесь создать какое-либо всплывающее окно, вам также может понадобиться директива overflow: hidden.

Answer 2

<div id="hd_hype_container" style="margin-top:50%;margin:0 auto;width:600px;height:405px;">
    <script type="text/javascript" charset="utf-8" src="hd/hd.js?88618"></script>
</div>