Question

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

我的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;通过-50%错位其子。喜欢的东西：

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

这种方式，容器会在页面的正中央，并且内容将在容器的正中央。

See this example fiddle