css - 固定页眉和边距

Question

我的问题是在页面顶部有一个固定的导航，并将文档的其余部分设置为 margin: 0 auto; 这样当页面展开时，所有内容都保持在中心。有没有办法让固定页眉在页面扩展和收缩时保持固定在页面的中心，以及在页面滚动或不滚动时上下移动？

.container {
     max-width: 1200px;
     height: 1200px;
     position: relative;
     border: 0px;
     text-align: center;
     left: 30px;
 }
 .header {
     width: 1200px;
     height: 140px;
     padding: 0px;
     border: 0px;
     background-color: white;
     position: fixed;
     left: 50%;
     top: 0px;
     z-index: 1;
 }

Answer 1

你的导航有固定的宽度？您的 HTML/CSS 代码将是一厢情愿。

但不得不猜测，我认为这可能会有所帮助：

.header {
    position: fixed;
    width: 400px;
    left: 50%;
    margin-left: -200px; /* 50% of the elements width */
}
.content {
    width: 400px;
    margin: 0 auto;
}

演示。