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

获得所需效果的一种方法是，使用left将fixed包装器水平设置为50%，并且不需要宽度。让它与内容一起成长：

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

然后，使用left和position: relative;通过-50%来错置它的子对象。类似于：

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

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