我一直使用全局包装器来保持我的布局 960px 并将我的所有内容包含在包装器内。我正试图摆脱这一点，而是让我所有的“部门”（如刊头、导航、滑块、content_area）看起来像这样：
// CSS:
.container {
width: 960px;
margin: 0 auto;
}
#masthead {
width: 100%;
background: #000;
}
#navigation {
width: 100%;
background: red;
}
#slider {
width: 100%;
background: grey;
}
// HTML:
<div id="masthead">
<div class="container">
<!-- masthead content goes here -->
</div>
</div>
<div id="navigation">
<div class="container">
<!-- navigation content goes here -->
</div>
</div>
<div id="slider">
<div class="container">
<!-- masthead content goes here -->
</div>
</div>
首先，我不相信这是实现最终结果的唯一方法（或者可能是最好的方法）。尽管这很有效，并且我能够更好地设置我的各个部门的样式，并且仍然限制内容的宽度和“位置”，但我真的很重视如何在没有过多容器类的情况下实现上述目标。
我的第二个问题，更具体地说，我寻求建议的原因在于我现在正在使用的项目中，我没有用于上面滑块的“容器”。我希望我的幻灯片是全屏的（所以实际上幻灯片是从屏幕的边缘）到页面的中心位置。我仍然希望我的幻灯片宽度为 960 像素或不超过该宽度，但是当滑入以定位在“滑块”div 的中心时。
我正在使用的插件叫做 LayerSlider，它允许我在每张幻灯片上都有“层”，可以从不同的方向滑入到幻灯片的最终位置。（此处示例：LayerSlider 全屏预览）。
每个幻灯片元素都是绝对定位的，您必须使用“left”和“top”指示幻灯片层将在动画之后定位的位置。
我已经设法使用“left: 50%; top: 5%”使内容“居中”，但是当我调整浏览器的大小时，元素会移动到不合适的位置。
我希望我是有道理的，希望有人可以帮助我如何在全宽 div 中定位元素，并且无论用户分辨率如何，它看起来仍然相同。