CSS，jquery水平对齐中的固定标题

我对jquery有一个问题，我制作了一个固定的标题，但是当它向下滚动时，它没有水平对齐。在CSS中，我将边距放在左边：auto；右边距：自动；它做得很好，但当我向下滚动时，标题会转到左侧

我不知道这是jquery还是CSS中的问题

非常感谢

以下是我的jQuery：

$(function () {
    var HeaderTop = $('#header').offset().top;
    $(window).scroll(function () {
        if ($(window).scrollTop() > HeaderTop) {
            $('#header').css({
                position: 'fixed',
                top: '0px',
                marginLeft: 'auto',
                marginRight: 'auto'
            });
        } else {
            $('#header').css({
                position: 'relative',
                top: '0px'
            });
        }
    });
});

我的CSS：

    html, body
    {
        height:100%;
    }
    body
    {
        margin: 0;
        padding: 0;
    } 
    #header
    {
        width:900px;
        height:100px;
        background-color:#FFF;
        margin-left:auto;
        margin-right:auto;
        border-top:1px;
        border-top-color:#D2D2D2;
        border-top-style:solid;
        border-bottom:1px;
        border-bottom-color:#D2D2D2;
        border-bottom-style:solid;
    }
    header
    {
        background-color:#FFF;
        width:900px;
        margin-left:auto;
        margin-right:auto;
        text-align:center;
    }
    .content
    {
        width:900px;
        margin-left:auto;
        margin-right:auto;
    }
    #header ul
    {
        list-style:none;
    }
    #header ul li
    {
        display:inline;
        padding:10px;
    }

我的HTML：

    <header>
    <img src="darkness.png" height="100" />
    </header>
    <div id="header">
    <ul>
    <li>Home</li><li>About</li>
    </ul>
    </div>
    <div class="content">
    </div>

主页
关于

---

jsiddle演示：

您甚至不需要为此使用JQuery

为了稍微解释一下这一点，负边距是您定义的宽度的一半，因为元素基于其最左上角的点在页面上居中，所以我们通过将其向后移动一半来补偿这一点

固定位置默认为最左边和最上面对齐，所以需要一点按摩

但正如您所看到的，这是一个CSS解决方案，所以除非您需要使用JQuery，否则我将避免使用它。它为纯CSS中可以完成的事情增加了不必要的开销和复杂性

---

JQUERY解决方案

---

您不能将

自动
边距
与
固定
定位一起使用，您需要使用我建议的边距固定。
您可以像这样添加一个额外的div

<div id="wrapp">
    <div id="header">
        <ul>
            <li>Home</li>
            <li>About</li>
        </ul>
    </div>
</div>     

因此，您可以有保证金：0自动；工作

这里有一段代码：我不想要类似的东西，我想要在向下滚动页面时有一个固定的标题，类似的东西：。但是头球偏左没有问题。使用固定定位有时会很棘手。
    if ($(window).scrollTop() > HeaderTop) {
        $('#header').css({
            position: 'fixed',
            top: '0px',
            left:'50%',
            marginLeft: '-450px'
        });

<div id="wrapp">
    <div id="header">
        <ul>
            <li>Home</li>
            <li>About</li>
        </ul>
    </div>
</div>     

#wrapp{
    width:100%;
    position:fixed;
    top:0px;
}