Comment centrer facilement une <div> horizontalement à l'aide de CSS ?

Question

J'essaie de centrer horizontalement un <div> sur une page et qu'il soit réglé sur une largeur minimale. Quelle est la façon la plus simple de procéder ? Je veux que l'élément <div> pour être en ligne avec le reste de ma page. Je vais essayer de dessiner un exemple :

page text page text page text page text
page text page text page text page text
               -------
               | div |
               -------
page text page text page text page text
page text page text page text page text

Answer 1

Dans le cas d'un largeur non fixe (c'est-à-dire que vous ne connaissez pas l'espace qu'occupera la division).

#wrapper {
  background-color: green; /* for visualization purposes */
  text-align: center;
}
#yourdiv {
  background-color: red; /* for visualization purposes */
  display: inline-block;
}

<div id="wrapper">    
    <div id="yourdiv">Your text</div>
</div>

Gardez à l'esprit que la largeur de #yourdiv est dynamique -> il s'agrandit et se rétrécit pour s'adapter au texte qu'il contient.

Vous pouvez vérifier la compatibilité des navigateurs sur Caniuse

Answer 2

Dans la plupart des navigateurs, cela fonctionnera :

div.centre {
  width: 200px;
  display: block;
  background-color: #eee;
  margin-left: auto;
  margin-right: auto;
}

<div class="centre">Some Text</div>

Dans IE6, vous devrez ajouter un autre élément extérieur. div :

div.layout {
  text-align: center;
}

div.centre {
  text-align: left;
  width: 200px;
  background-color: #eee;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

<div class="layout">
  <div class="centre">Some Text</div>
</div>

Answer 3

margin: 0 auto;

comme ck a dit , largeur minimale n'est pas pris en charge par tous les navigateurs

Answer 4

.center {
   margin-left: auto;
   margin-right: auto;
}

La largeur minimale n'est pas prise en charge de manière globale, mais peut être mise en œuvre à l'aide de

.divclass {
   min-width: 200px;
}

Ensuite, vous pouvez définir votre div comme étant

<div class="center divclass">stuff in here</div>

Answer 5

CSS , HTML :

div.mydiv {width: 200px; margin: 0 auto}

<div class="mydiv">

    I am in the middle

</div>

Votre diagramme montre également un élément de niveau bloc (ce qu'est généralement un div), et non un élément en ligne.

Du haut de ma tête, min-width est supporté dans FF2+/Safari3+/IE7+. Il est possible de le faire pour IE6 en utilisant des feuilles de style CSS ou un simple bout de JS.