【问题标题】：What is the correct way to do a CSS Wrapper?做 CSS Wrapper 的正确方法是什么？
【发布时间】：2011-07-13 14:56:39
【问题描述】：

我听很多朋友谈论在 CSS 中使用包装器来使网站的“主要”部分居中。

这是实现这一目标的最佳方式吗？什么是最佳实践？还有其他方法吗？

【问题讨论】：

正确的方法有多种。不过，我像你的朋友一样使用包装器。

标签： html css

【解决方案1】：

最基本的例子（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; 对其应用自动水平边距。自动边距确保您的元素居中。

【讨论】：

除非您在每个 HTML 文件中只使用一个 <div id="wrapper">，否则您应该使用 @Hussein 的 <div class="wrapper"> 以保持有效的 HTML。
使用 max-width: 500px 更加灵活。 ;)

【解决方案2】：

最好的方法取决于您的具体用例。

但是，如果我们代表实现 CSS 包装器的一般最佳实践，我的建议是：引入一个具有以下类的附加 <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 */
}

...对于那些想了解为什么的人，我认为有以下 4 大理由：

1.使用`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 似乎是更好的选择！-

2.在侧面添加填充

我看到很多开发人员仍然忘记了一个极端情况。假设我们有一个包装器，max-width 设置为 980px。当用户的设备屏幕宽度正好是 980 像素时，就会出现边缘情况。然后内容将完全粘在屏幕边缘，没有任何喘息的空间。

一般来说，我们希望在侧面有一点填充。这就是为什么如果我需要实现一个总宽度为 980px 的 Wrapper，我会这样做：

.wrapper {
   max-width: 960px; /** 20px smaller, to fit the paddings on the sides */
   
   padding-right: 10px;
   padding-left:  10px;
   
   /** ... omitted for brevity */
}

因此，这就是为什么将 padding-left 和 padding-right 添加到 Wrapper 可能是个好主意，尤其是在移动设备上。

或者，考虑使用 box-sizing 以使内边距根本不会改变整体宽度。

3.使用`<div>` 而不是`<section>`

根据定义，Wrapper 没有语义含义。它只是保存页面上的所有视觉元素和内容。它只是一个通用容器。所以从语义上来说，<div>是最好的选择。

有人可能想知道<section> 元素是否适合这个目的。然而，这是 W3C 规范所说的：

该元素不是通用容器元素。当一个元素仅用于样式目的或为了方便编写脚本时，鼓励作者使用 div 元素。一般规则是，只有当元素的内容明确地列在文档大纲中时，section 元素才是合适的。

<section> 元素带有它自己的语义。它代表内容的主题分组。应确定每个部分的主题，通常通过包含标题（h1-h6 元素）作为部分元素的子元素。

章节的示例包括章节、选项卡式对话框中的各种选项卡式页面或论文的编号章节。网站的主页可以分为介绍、新闻和联系信息等部分。

乍一看可能不是很明显，但是是的！普通的旧 <div> 最适合 Wrapper！

4.使用 `<body>` 标签与使用额外的 `<div>`

Here's a related question。是的，在某些情况下，您可以简单地使用 <body> 元素作为包装器。但是，我不建议您这样做，仅仅是因为灵活性和对变化的适应能力。

这里有一个用例说明了一个可能的问题：想象一下，如果在项目的后期阶段，您需要强制将页脚“粘贴”到文档的末尾（当文档很短时，位于视口的底部） .即使您可以使用最现代的方式来做到这一点 - with Flexbox，我想您也需要一个额外的 Wrapper <div>。

我的结论是，最好使用额外的<div> 来实现 CSS Wrapper。这样，如果以后规范要求发生变化，您不必稍后添加 Wrapper 并处理大量移动样式。毕竟，我们只是在谈论 1 个额外的 DOM 元素。

【讨论】：

Kaloyan has also authored this answer as a css-tricks article

【解决方案3】：

你不需要包装器，只需使用主体作为包装器即可。

CSS：

body {
    margin:0 auto;
    width:200px;
}

HTML：

<body>
    <p>some content</p>
<body>

【讨论】：

为什么没有评论就被降价了？与迄今为止提供的所有其他解决方案相比，它绝对有效并且需要更少的代码？
嗯，你需要给它一个宽度，否则默认情况下它只会拉伸 100%，你不会真正看到任何居中的东西......
是的，body 需要有一个宽度，这似乎很明显：jsfiddle.net/alangilby/ER8NT
这是我最喜欢的处理这个问题的方法。和
一样是块元素。嵌套它们是多余的。这释放了 .wrapper 类，以便在布局块中进行更通用的调整。
但是人们可能想要在包装器之外添加一些东西。那么这将失败。

【解决方案4】：

<div class="wrapper">test test test</div>

.wrapper{
    width:100px;
    height:100px;
    margin:0 auto;
}

在http://jsfiddle.net/8wpYV/查看工作示例

【讨论】：

【解决方案5】：

最简单的方法是设置一个“包装器”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>

【讨论】：

【解决方案6】：

“包装器”只是封装页面上所有其他视觉元素的某些元素的术语。 body 标签似乎符合要求，但如果您调整 max-width，您将受制于浏览器来确定其下方显示的内容。

相反，我们使用div，因为它充当了一个不会损坏的简单容器。 HTML5 中的main、header、footer 和section 标记只是适当命名的div 元素。由于这种趋势，似乎可能（或应该）有一个wrapper 标签，但您可以使用您认为最适合您的情况的任何包装方法。通过类、ids 和 css，您可以以非常相似的方式使用span 标签。

有很多我们不经常使用甚至可能不知道的 HTML 元素标签。做一些研究会告诉你纯 HTML 可以做什么。

【讨论】：

【解决方案7】：

还有其他方法吗？

负边距也用于水平（和垂直！）居中，但是当您调整窗口浏览器大小时有很多缺点：没有窗口滑块；如果窗口浏览器的尺寸太小，将无法再看到内容。
毫不奇怪，因为它使用绝对定位，从未完全驯服过的野兽！

示例：http://bluerobot.com/web/css/center2.html

所以这只是您所要求的仅供参考，margin: 0 auto; 是一个更好的解决方案。

【讨论】：

【解决方案8】：

居中内容有很多途径，无法在一个答案中真正探索。如果您想探索它们，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/

所以这里我们有一个 500 像素宽的内容集，以所有*大小为中心。 padding 0 是为了处理一些喜欢应用一些默认填充的浏览器，让我们有点失望。在示例中，我确实将内容包装在 article 标签中，以方便屏幕阅读器、Pocket 等，例如，盲人可以跳过您可能拥有的导航（应该在 nav 中）并直接进入内容。

我说全部*因为低于 500 像素会搞砸 - 我们没有响应。要获得响应，您可以只使用 Bootstrap 等，但您自己构建它您使用媒体查询，如：

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/

但通常只希望将页面的一部分居中，所以让我们在最后一个示例中仅将其应用于文章标签。

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，这也是您可以将事物居中的新方法之一。所以，这很有趣。

但是，在某些特殊情况下，您需要使用其他方法来使内容居中，并且每种方法都可能值得提出自己的问题（其中许多已经在本网站上提出并回答了）。

【讨论】：

【解决方案9】：

/******************
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>

【讨论】：

1.使用max-width 代替width

2.在侧面添加填充

3.使用&lt;div&gt; 而不是&lt;section&gt;

4.使用 &lt;body&gt; 标签与使用额外的 &lt;div&gt;

在http://jsfiddle.net/8wpYV/查看工作示例

1.使用`max-width` 代替`width`

3.使用`<div>` 而不是`<section>`

4.使用 `<body>` 标签与使用额外的 `<div>`