css - 使元素以 100% 宽度的 div 居中放置在我的页面上

Question

我一直使用全局包装器来保持我的布局为 960 像素，并将我的所有内容包含在包装器中。我正试图摆脱这一点，而是让我的所有“分区”(如 header 、导航、 slider 、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>

首先，我不相信这是唯一的(或可能是最好的)方法 实现我的最终结果。虽然这行得通，而且我能够更好地设计我的各个分区的样式并且仍然限制内容的宽度和“位置”，但我真的很重视关于如何在没有过多容器类的情况下实现上述目标的输入。

我的第二个问题，更具体地说，我征求意见的原因是在我现在正在处理的元素中，我没有上面 slider 的“容器”。我希望我的幻灯片是全屏的(因此有效地从屏幕边缘滑动)到页面的中心位置。我仍然希望我的幻灯片宽度为 960px 或不超过该宽度，但是当滑入时位于“ slider ”div 的中心。

我正在使用的插件称为 LayerSlider，它允许我在每张幻灯片上设置“图层”，可以从不同的方向滑入幻灯片的最终位置。 (此处示例:LayerSlider full screen preview)。

每个幻灯片元素都是绝对定位的，您必须使用“left”和“top”来指示幻灯片层在动画之后的位置。

我已经设法使用“左:50%；上:5%”使内容“居中”，但是当我调整浏览器大小时，元素会移动到位。

我希望我说得有道理，并希望有人可以帮助我如何在全宽 div 中定位元素，并且无论用户分辨率如何，它们看起来都一样。

Answer 1

只要您不想在 wrapper 上设置背景，就不需要 wrapper 来包含您的内容并使其居中。您可以通过将该样式直接应用于 body 来保持代码语义:

HTML

<nav>
  hi i am the navigation
</nav>
<footer>
  hi i am the footer
</footer>​

CSS

html {
  width: 100%;
}
body {
  border: 1px solid #ddd;
  width: 50px;
  margin: 0 auto;
}​

View on JSFiddle