html - 如何让div在页面的同一时间中心停留在顶部？

Question

我有一个高度和宽度固定的 div，我使用左右边距 auto 居中。但我希望这个栏在我的整个页面中都可见，所以我使用 position:absolute 将其粘贴。但随后条形图向左移动，不再居中。如何将栏固定到中心顶部位置？

<div class="bar">bar</div>

.bar{
    width: 400px;
    height: 40px;
    margin-left:auto;
    margin-right:auto;
    background-color:orange;
}

Here是 fiddle 。

Answer 1

尝试使用 100% 宽度的容器 div，将其固定在顶部，然后将栏置于其中居中。 CSS:

.bar{
    width: 400px;
    height: 40px;
    margin:0 auto;
    background-color:orange;
}
.container
{
width:100%;
    position:fixed;
    top:0px;
    left:0px;
}

Updated Fiddle