我听过很多朋友谈论在CSS中使用包装器来集中网站的“主要”部分。
这是实现这一目标的最佳方法吗？什么是最佳做法？还有其他方法吗？
答案 0 :(得分：33)
最基本的例子（live example here）：
<强> CSS：
#wrapper {
width: 500px;
margin: 0 auto;
}
<强> HTML：
<body>
<div id="wrapper">
Piece of text inside a 500px width div centered on the page
</div>
</body>
该原则如何运作：
创建您的包装并为其指定一定的宽度。然后使用margin: 0 auto;或margin-left: auto; margin-right: auto;为其应用自动水平边距。自动边距确保您的元素居中。
答案 1 :(得分：13)
最好的方法取决于您的具体用例。
但是，如果我们代表一般最佳做法来实现CSS Wrapper，那么我的建议就是：引入一个带有以下类的额外<div>元素：
/**
* 1. Center the content. Yes, that's a bit opinionated.
* 2. Use `max-width` instead `width`
* 3. Add padding on the sides.
*/
.wrapper {
margin-right: auto; /* 1 */
margin-left: auto; /* 1 */
max-width: 960px; /* 2 */
padding-right: 10px; /* 3 */
padding-left: 10px; /* 3 */
}
...对于那些想要了解为什么的人，以下是我看到的四大理由：
max-width代替width 在answer currently accepted Aron说width。我不同意，我建议改为max-width。
设置块级元素的width将阻止它伸展到其容器的边缘。因此，Wrapper元素将占用指定的宽度。当浏览器窗口小于元素的宽度时，会发生此问题。然后，浏览器会在页面中添加一个水平滚动条。
在这种情况下，使用max-width会改善浏览器对小窗口的处理。在使网站在小型设备上可用时，这一点很重要。这是一个展示问题的好例子：
/**
* The problem with this one occurs
* when the browser window is smaller than 960px.
* The browser then adds a horizontal scrollbar to the page.
*/
.width {
width: 960px;
margin-left: auto;
margin-right: auto;
border: 3px solid #73AD21;
}
/**
* Using max-width instead, in this situation,
* will improve the browser's handling of small windows.
* This is important when making a site usable on small devices.
*/
.max-width {
max-width: 960px;
margin-left: auto;
margin-right: auto;
border: 3px solid #73AD21;
}
/**
* Credits for the tip: W3Schools
* https://www.w3schools.com/css/css_max-width.asp
*/<div class="width">This div element has width: 960px;</div>
<br />
<div class="max-width">This div element has max-width: 960px;</div>
所以在响应能力方面，似乎max-width是更好的选择！ -
我见过许多开发人员仍然忘记了一个边缘案例。假设我们有一个max-width设置为980px的包装器。当用户的设备屏幕宽度恰好为980px时，会出现边缘情况。然后，内容将完全粘贴到屏幕的边缘，而不会留下任何喘息空间。
通常，我们希望在侧面有一些填充。这就是为什么如果我需要实现总宽度为980px的Wrapper，我会这样做：
.wrapper {
max-width: 960px; /** 20px smaller, to fit the paddings on the sides */
padding-right: 10px;
padding-left: 10px;
/** ... omitted for brevity */
}
因此，这就是为您的Wrapper添加padding-left和padding-right可能是一个好主意，尤其是在移动设备上。
<div>而不是<section> 根据定义，Wrapper没有语义含义。它只包含页面上的所有可视元素和内容。它只是一个通用的容器。因此，就语义而言，<div>是最佳选择。
有人可能想知道<section>元素是否符合此目的。但是，这是W3C规范所说的：
元素不是通用容器元素。当一个元素仅用于样式目的或作为脚本编写的便利时，鼓励作者使用div元素。一般规则是，只有元素的内容在文档大纲中明确列出时，section元素才适用。
<section>元素带有它自己的语义。它代表了内容的主题分组。应通过将标题（h1-h6元素）作为section元素的子元素来识别每个部分的主题。
部分的示例可以是章节，选项卡式对话框中的各种选项卡式页面，或论文的编号部分。网站的主页可以分为几个部分，用于介绍，新闻和联系信息。
乍一看似乎不太明显，但是是的！简单的旧<div>最适合包装！
<body>代码与使用其他<div> Here's a related question。是的，在某些情况下，您可以简单地使用<body>元素作为包装器。但是，我不建议您这样做，只是因为灵活性和对变化的适应能力。
这是一个用例，说明了一个可能的问题：想象一下，如果在项目的后期阶段，您需要强制执行页脚以“粘贴”到文档的末尾（当文档很短时，视口的底部） 。即使您可以使用最现代的方式进行操作 - with Flexbox，我猜您还需要一个额外的包装器<div>。
我认为最好还是有一个额外的<div>来实现CSS Wrapper。这样，如果规范要求稍后改变，您不必在以后添加Wrapper并处理大量移动样式。毕竟，我们只讨论了一个额外的DOM元素。
答案 2 :(得分：7)
您不需要包装器，只需将主体用作包装器。
CSS：
body {
margin:0 auto;
width:200px;
}
HTML：
<body>
<p>some content</p>
<body>
答案 3 :(得分：3)
<div class="wrapper">test test test</div>
.wrapper{
width:100px;
height:100px;
margin:0 auto;
}
答案 4 :(得分：1)
最简单的方法是设置一个“包装”div元素，其中width设置为auto，左右边距为<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
.wrapper { width: 960px; margin: 0 auto; background-color: #cccccc; }
body { margin: 0; padding: 0 }
</style>
</head>
<body>
<div class="wrapper">
your content...
</div>
</body>
</html>
。
示例标记：
{{1}}
答案 5 :(得分：0)
还有其他方法吗？
负边距也用于水平（和垂直！）居中，但是当你调整窗口浏览器的大小时有很多缺点：没有窗口滑块;如果窗口浏览器的尺寸太小，则无法再看到内容 毫不奇怪，它使用绝对定位，一个野兽从未被完全驯服过！
示例：http://bluerobot.com/web/css/center2.html
所以那只是你所要求的FYI，margin: 0 auto;是一个更好的解决方案。
答案 6 :(得分：0)
“包装器”只是某个元素的术语，它封装了页面上的所有其他可视元素。 body标记似乎符合要求，但如果您调整max-width，您将受浏览器的支配以确定显示在其下方的内容。
相反，我们使用div，因为它充当一个不会破坏的简单容器。 HTML5中的main，header，footer和section标记只是恰当命名的div个元素。由于这种趋势，似乎可能（或应该）是wrapper标签，但您可以使用最适合您情况的任何包装方法。通过类，ID和CSS，您可以以非常类似的方式使用span标记。
我们经常使用或甚至不知道有很多HTML元素标签。做一些研究会告诉你用纯HTML做什么。
答案 7 :(得分：0)
居中的内容有很多途径，因此无法真正通过单个答案进行探讨。如果您想探索它们，CSS Zen Garden is an enjoyable-if-old resource探索了许多甚至旧浏览器都可以忍受的布局内容的方法。
如果您没有缓解要求，那么正确的方法是将margin: auto应用于侧面，再加上width。如果您的页面没有内容需要超出这些限制，则将其应用于正文：
body {
padding: 0;
margin: 15px auto;
width: 500px;
}
https://jsfiddle.net/b9chris/62wgq8nk/
因此，在这里，我们获得了以所有*尺寸为中心的500px宽的内容集。 padding 0是用来处理一些浏览器的，这些浏览器喜欢应用一些默认的padding并将我们甩开一些。在示例中，我确实将内容包装在article标签中，以使其适合屏幕阅读器，Pocket等，例如，盲人可以跳过您可能拥有的导航（应该在nav中）并直接转到内容。
我全部说*，因为低于500像素会搞乱-我们的反应不灵敏。要获得响应能力，您可以只使用Bootstrap等，但是您可以使用Media Query自己构建它，例如：
body {
padding: 0;
margin: 15px;
@media (min-width: 500px) {
margin: 15px auto;
width: 500px;
}
}
请注意，这是SCSS / SASS语法-如果您使用的是纯CSS，则会被颠倒：
body {
padding: 0;
margin: 15px;
}
@media (min-width: 500px) {
body {
margin: 15px auto;
width: 500px;
}
}
https://jsfiddle.net/b9chris/62wgq8nk/6/
但是，通常只将页面的一小部分居中，因此在最后一个示例中，仅将其应用于article标签。
body {
padding: 0;
margin: 0;
}
nav {
width: 100%;
box-sizing: border-box;
padding: 15px;
}
article {
margin: 15px;
@media (min-width: 500px) {
margin: 15px auto;
width: 500px;
}
}
https://jsfiddle.net/b9chris/62wgq8nk/17/
请注意，此最后一个示例还在导航中使用了CSS Flexbox，这也是使事物居中的新方法之一。所以，这很有趣。
但是，在特殊情况下，您需要使用其他方法来使内容居中，并且每种方法可能都值得提出自己的问题（其中许多已经在此站点上得到了解答）。
答案 8 :(得分：-2)
/******************
Fit the body to the edges of the screen
******************/
body {
margin:0;
padding:0;
}
header {
background:black;
width:100%;
}
.header {
height:200px;
}
nav {
width:100%;
background:lightseagreen;
}
.nav {
padding:0;
margin:0;
}
.nav a {
padding:10px;
font-family:tahoma;
font-size:12pt;
color:white;
}
/******************
Centered wrapper, all other content divs will go inside this and will never exceed the width of 960px.
******************/
.wrapper {
width:960px;
max-width:100%;
margin:0 auto;
}
<!-------- Start HTML ---------->
<body>
<header>
<div id="header" class="wrapper">
</div>
</header>
<nav>
<div id="nav" class="wrapper">
</div>
</nav>
</body>