如何在页面水平居中的div下方显示图像？

Question

我有这个布局：

此处代码：http://m6000225.ferozo.com/test/

我需要将蓝色和棕色图像放在主要内容div下面，并且无论窗口宽度如何都要对齐，两者都水平居中。
我实现了一个我在这个网站上读过的CSS提示，它有一个绝对位置和左边的div：50％和一个img里面的相对位置和左边：-50％。 它的工作正常，除了它将页面宽度向右推，正如您在屏幕截图中看到的那样，可以看到滚动条。
像jQuery这样的第三方lib解决方案是受欢迎的，但我更喜欢简单的CSS。

PS：我还需要在页脚下面有类似的东西，但我想使用相同的解决方案，底部值为负值应该有效，对吧？

PS2：将蓝褐色条带延伸到窗口的两个边框都没问题，因为我已经使用了另一个具有绝对位置和背景重复的div：repeat-x。

Answer 1

由于课程left: 50%;上的.header-image，滚动条正在显示。你应该放弃它。由于该标签具有宽度设置，当您将其按下超过50％时，它会落在窗口之外，迫使滚动条出现。

在放下左侧调用之后，应该将该div的宽度设置为窗口的宽度，而不是以像素为单位的特定值。使用Width: 100%。因此，该标记应如下所示：

.header-image {
  height: 245px;  
  position: absolute;
  top: 40px;
  width: 100%;
  z-index: -1;
}

之后，您需要重新居中div中包含的图像。要做到这一点，不要使用位置（依赖于设置边界），而是给元素自动边距。使用：

.header-image img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

这将重新定位图像。如果您正在寻找，请告诉我们！

Answer 2

Per Paulie_D的建议：

.header-image {
position:absolute;
z-index: -1;
top: 40px;
width: 100%;
height: 245px;
background-image: url('header.png');
background-position: center;
background-repeat: no-repeat;

}
这样做了。