定心部分，标题的问题是固定的，宽度是100％

Question

我正在尝试将该部分置于屏幕中心。标题是固定的，标题容器也是固定的。标题容器包含徽标，导航和社交链接。

说标题和标题容器正在使用top:0;，我似乎无法理解它的工作原理。我知道使用margin: 0 auto;会使它居中，但不是在这种情况下。

编辑：每当我看起来居中时，当我缩小它射向左侧时，标题似乎保持居中，这是我正在寻找的结果。

HTML：

<header>
    <div id="header-container">
        <nav></nav>
        <div id="social"></div>
    </div>
</header>
<section></section>

CSS：

body {
font-family: 'Open Sans', sans-serif;
text-align: center; 
    position: relative;
    margin: 0 auto;
    background: #ccc;
}

#wrapper {
    width: 1048px;
    min-height: 800px;
    text-align: left;
    margin: 0;
    padding: 0;
}

header {
    width: 100%;
    height: 86px;
    text-align: center;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: fixed;
    top:0;
    background-image: url("../images/header-banner.png");
    border-bottom: 2px solid #5d5d5d;
}
div#header-container {
    width: 1048px;
    height: 86px;
    position: relative;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    border: 1px solid green;
}
section {
    width: 1048px;
    min-height: 500px;
    background:#fff;
    margin:86px auto 0;
    z-index: -1;
    position: relative;
}

Answer 1

如果您的宽度是其容器的100％，margin: 0 auto;将无法在大多数浏览器中使用。将其更改为98％，它将正确自动居中。如果宽度由像素或任何其他测量类型设置，也会发生这种情况。