Quelle est la façon correcte de faire un CSS Wrapper?

La meilleure façon de le faire dépend de votre cas d'utilisation.

Cependant, si nous parlons de la bonnes pratiques générales pour la mise en œuvre d'un CSS Wrapper, voici ma proposition: introduire un supplément de <div> élément avec la classe suivante:

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

... pour ceux d'entre vous qui veulent comprendre pourquoi, voici les 4 grandes raisons que j'ai:

1. Utilisation max-width au lieu width

Dans le réponse acceptée Aron dit width. Je suis en désaccord et je propose max-width à la place.

Réglage de la width d'un bloc au niveau de l'élément de l'empêcher de s'allonger sur les bords du récipient. Par conséquent, l'élément Wrapper prendra la largeur spécifiée. Le problème se produit lorsque la fenêtre du navigateur est plus petite que la largeur de l'élément. Le navigateur, puis ajoute une barre de défilement horizontale de la page.

L'aide de max-largeur au lieu de cela, dans cette situation, permettra d'améliorer le navigateur de la manipulation de petites fenêtres. Ceci est important lors de la réalisation d'un site utilisable sur de petits appareils. Voici un bon exemple montrant le problème:

CSS:

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

HTML:

<div class="width">This div element has width: 960px;</div>
<br />

<div class="max-width">This div element has max-width: 960px;</div>

Donc, en termes de Réactivité, est semble comme max-width est le meilleur choix!-

---

2. Ajouter Rembourrage sur les Côtés

J'ai vu beaucoup de développeurs toujours oublier un cas limite. Disons que nous avons un Wrapper avec max-width ensemble de 980px. Le cas de bord s'affiche lorsque l'utilisateur de l'appareil largeur de l'écran est exactement 980px. Le contenu alors exactement de la colle sur les bords de l'écran avec n'importe quel espace de respiration gauche.

Généralement, nous souhaitons avoir un peu de rembourrage sur les côtés. C'est pourquoi, si j'ai besoin d'implémenter une enveloppe avec une largeur totale de 980px, je ferais comme ceci:

.wrapper {
   max-width: 960px; /** 20px smaller, to fit the paddings on the sides */

   padding-right: 10px;
   padding-left:  10px;

   /** ... omitted for brevity */
}

Par conséquent, c'est pourquoi l'ajout de padding-left et padding-right à votre gestionnaire pourrait être une bonne idée, surtout sur mobile.

---

3. Utiliser un <div> au Lieu d'un <section>

Par définition, l'emballage n'a pas de sens sémantique. Il tient simplement tous les éléments visuels et le contenu sur la page. C'est juste un conteneur générique. Par conséquent, en termes de sémantique, <div> est le meilleur choix.

On peut se demander si peut-être un <section> élément pourrait correspondre à cet objectif. Cependant, voici ce que le W3C spec dit:

L'élément n'est pas un conteneur générique élément. Lorsqu'un élément est nécessaire seulement pour le style de fins ou pour des raisons de commodité pour les scripts, les auteurs sont encouragés à utiliser l'élément div à la place. Une règle générale est que l'élément de section est pertinente que si l'élément de contenu devrait être explicitement mentionné dans le document du plan.

La <section> élément porte sa propre sémantique. Il représente un groupe thématique de contenu. Le thème de chaque section doit être identifié, généralement en incluant un en-tête (h1-h6 élément) en tant qu'enfant de l'élément de section.

Exemples de sections de chapitres, les différentes pages d'onglets dans une boîte de dialogue à onglets, ou les sections numérotées de thèse. Un site Web page d'accueil pourrait être divisé en sections pour une introduction, des articles d'actualités et des informations de contact.

Il peut ne pas sembler très évident à première vue, mais oui! La plaine vieux <div> qui convient le mieux pour un Wrapper!

---

4. À l'aide de la <body> Tag vs l'Utilisation d'un autre <div>

Voici une question connexe. Oui, il y a certains cas où vous pouvez simplement utiliser le <body> élément de l'enveloppe. Cependant, je ne vous recommande pas de le faire, simplement en raison de la flexibilité et de la résilience aux changements.

Voici un cas d'utilisation qui illustre un problème possible: Imaginez si, à un stade ultérieur du projet que vous avez besoin de mettre un pied de page pour "coller" à la fin du document (en bas de la fenêtre d'affichage lorsque le document est court). Même si vous pouvez utiliser la plus moderne de la façon de le faire - avec Flexbox, je suppose que vous avez besoin d'un Wrapper <div>.

Je voudrais conclure, c'est toujours plus pratique d'avoir un supplément de <div> pour la mise en œuvre d'un CSS Wrapper. De cette façon, si les spec du changement des exigences plus tard, vous n'avez pas à ajouter le Wrapper plus tard et de traiter avec le déplacement des styles autour d'un lot. Après tout, nous parlons uniquement 1 extra élément du DOM.

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

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

Vérifier exemple de travail à http://jsfiddle.net/8wpYV/

Il existe d'autres moyens?

Des marges négatives ont également été utilisés pour les horizontales et les verticales!) le centrage, mais il ya quelques inconvénients lorsque vous redimensionnez la fenêtre du navigateur: pas de fenêtre curseur; le contenu ne peut pas être vu si la taille de la fenêtre du navigateur est trop petit.

Pas de surprise, car il utilise un positionnement absolu, une bête de ne jamais complètement apprivoisé!

Exemple: http://bluerobot.com/web/css/center2.html

Sorte que c'était seulement à titre d'information, comme vous l'avez demandé, margin: 0 auto; est une meilleure solution.

Centrage du contenu a donc de nombreuses pistes qu'il ne peut pas vraiment être explorées dans une seule et unique réponse. Si vous souhaitez explorer, CSS Zen Garden est agréable de s'y-si-vieux ressources explorer les nombreuses façons de mise en page du contenu d'une manière même de vieux navigateurs ne peuvent tolérer.

De la bonne façon, si vous n'avez pas d'atténuer les exigences, est simplement d'appliquer margin: auto sur les côtés, et un width. Si votre page n'a pas de contenu qui doit aller à l'extérieur de ces marges, il suffit d'appliquer pour le corps:

body {
  padding: 0;
  margin: 15px auto;
  width: 500px;
}

https://jsfiddle.net/b9chris/62wgq8nk/

Donc, ici, nous avons une 500px de large ensemble de contenu centré à tous les* tailles. Le rembourrage 0 est de traiter avec certains navigateurs, qui aime à s'appliquer par défaut, certaines de rembourrage et nous font perdre un peu. Dans l'exemple, je ne envelopper le contenu dans un article tag pour être agréable aux Lecteurs d'Écran, dans la Poche, etc donc, par exemple, les aveugles peuvent sauter la valeur liquidative vous avez probablement (qui devrait être nav) et à droite le contenu.

Je dis tout* parce que ci-dessous 500px cela embrouillerait - nous ne sommes pas d'être Réactif. Pour obtenir Sensibles, vous pouvez simplement utiliser Bootstrap, etc, mais de la construire vous-même, vous utilisez une Requête de Média comme:

body {
  padding: 0;

  margin: 15px;
  @media (min-width: 500px) {
    margin: 15px auto;
    width: 500px;
  }
}

Noter que c'est SCSS/SASS syntaxe - si vous utilisez de la plaine CSS, c'est inversé:

body {
  padding: 0;  
  margin: 15px;
}

@media (min-width: 500px) {
  body {
    margin: 15px auto;
    width: 500px;
  }
}

https://jsfiddle.net/b9chris/62wgq8nk/6/

Il est courant de vouloir du centre juste un morceau d'une page, donc nous allons l'appliquer qu'à la balise article dans un dernier exemple.

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/

Noter que ce dernier exemple utilise également CSS Flexbox de la valeur liquidative, qui est aussi l'un des nouveaux moyens de centre des choses. Donc, c'est amusant.

Mais, il y a des circonstances où vous avez besoin d'utiliser d'autres approches pour le contenu du centre, et chacune de celles-ci est probablement la peine de sa propre question (beaucoup d'entre eux déjà posées et répondues ici, sur ce site).