css - DFP 背景皮肤 - 无法使其居中

Question

我正在加载 Google DFP 背景皮肤广告单元。我已经正确显示了它，但是一旦网络浏览器缩小到比图像宽度本身更小的宽度，我就无法让背景图像保持居中。相反，图像会固定在浏览器的左侧并从右向左折叠，导致中心内容面板不再以背景图像为中心。

我的 html 代码是:

<div id="background-skin" class="desktop-ad">
<div id='div-gpt-ad-XXXXXXXXXXX-X'>
<script type='text/javascript'>
    googletag.cmd.push(function() { googletag.display('div-gpt-ad-XXXXXXXXXXX-X'); });
</script>
</div>
</div>

我使用的css是:

#background-skin {
position: fixed;
z-index: 1;
width: 100%;
height: 1600px;
margin-left: auto;
margin-right: auto;
top: 0px;
text-align: center;
}

Answer 1

达到预期效果的一种方法是将 fixed 包装器水平设置为 50%，left，并且不需要宽度。让它随着内容一起成长:

#background-skin {
    position: fixed;
    z-index: 1;
    height: 1600px;
    top: 0px;
    left: 50%;
}

然后，使用 left 和 position: relative; 将它的 child 错放 -50%。像这样的东西:

#background-skin > div {
    position: relative;
    left: -50%;
    ...

这样，容器将位于页面的正中间，内容将位于容器的正中间。

See this example fiddle