Центр div в горизонтальной прокрутке сайта

Question

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

Я хочу, чтобы заголовок оставался в центре экрана, но остальная часть сайта прокручивается. обычно я просто устанавливаю левое и правое поля равными нулю, но так как ширина установлена ​​на полную ширину прокрутки, я представляю, что мне нужно сделать некоторый трюк с jQuery, чтобы найти ширину окна в первую очередь?

Любой совет, полученный с благодарностью!

Answer 1

Может быть сделано с помощью CSS, нет необходимости в javaScript.

<div class="page">
    <div class="header"></div>
</div>

.page{
    width:2000px;
    height:500px;
}
.header{
    width:300px;
    height:100px;
    background-color:red;
    position:fixed;
    top:0;
    left:50%;
    margin-left:-150px; /* negative half the width */

}

Проверьте рабочий пример на http://jsfiddle.net/ZEcax/

Answer 2

Это достаточно просто.

CSS:

 #center {
    position: fixed;
}

jQuery:

$('#center').css({
    'top': $(window).height()/2,
    'left': $(window).width()/2,
    'margin-left': $('#modal').width/2,
    'margin-top': $('#modal').height()/2
});

HTML

<div id="center">
    <!-- content goes here -->
</div>

Answer 3

Вам стоит взглянуть на плагин Center 2.0 .Это именно то, что вы хотите.