将 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

您应该查看 Center 2.0 插件。它完全符合您的要求。

Answer 3

这很容易。

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>