html - 将图像固定在顶部，但在两侧具有自动边距

Question

我有以下html：

<div class="fix-to-top">
    <div class="background-image"></div>
</div>

我希望能够将图像的位置固定到页面顶部——这样无论用户滚动多远，它都始终位于页面顶部。另外，我希望图像始终保持在页面的中心，因此如果用户重新调整浏览器的大小，图像就会保持在中心。这是我尝试过的，但没有得到结果：

.fix-to-top {
    position: fixed;
    top: 0px;
    width: 2000px;
}
.fix-to-top .background-image {
    margin: 0 auto;
}

但是，侧边距没有做“自动”。我将如何正确地做到这一点？

Answer 1

img {
    position: fixed;
    right: 50%;
    width: 100px;
    height: 100px;
    margin-top: -50px;
    margin-right: -50px;
    background: orange;
    top: 50%;
}​

http://jsfiddle.net/jXdxr/1/

Answer 2

检查这个小提琴

无需使用两个 div

您可以使用background-attachment和background-postion属性来实现它