Comment centrer une <div>

Bonjour,

J'aimerais savoir comment faire pour centrer une <div> </div> dans une page. Pour un tableau c'est simple, il suffit d'utiliser du CSS pour le centrer, mais comment faire avec une div ?

J'ai cherché sans réel succès.

Merci d'avance !

3 réponses

  1. Pour un tableau c'est simple, il suffit d'utiliser du CSS pour le centrer
    Pour une div, même chose.
    margin: auto;
    1. ha j'avais pas vu que vous aviez deja repondu
    2. Héhé.
      Pas grave, je ne suis pas rapide partout, prochaine fois j'aurais la 2ème place ;-)
    3. Je vais essayer ça.

      ce qui donnera donc dans ma feuille de style :

      #div {
      margin: auto;
      }

      et dans ma page HTML :

      <div id="div"> Mon contenu </div>
    4. Ca ne marche absolument pas, j'ai vraiment tout essayé, la div ne ce centre pas.

      (je veux centrer horizontalement seulement)
  2. un div avec css lui attribuer un id ou une class et mettre
    margin: auto;
    pour le centrer ou alors se servir de
    position: relative;
    1. le "position: relative;" ne marche pas

      j'ai mon contenu qui se décale vers la droite à chaque fois >< ce n'est pas centré mais plutot aligné à partir du centre j'ai l'impression
    2. oui mais il faut regler en utilisant top bottom right left
      exempole

      postion: relative;
      top: 148px;
      left:321px;
    3. Pourquoi top 148px et left 321px ?
    4. Je ne veux que centrer horizontalement
    5. c est un exemple tu met en pixel combien tu veu que ca se deplace sur la gauche(left) depuis la droite(right), depuis le bas ( bottom) ou depuis le dessus (top)
  3. .centrer{
    margin: 0 auto;
    width:300px;
    height:auto;
    border:1px solid red;
    }
    

    <div class="centrer">Ce div est centré</div>
    
    1. MERCIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii !!!
    2. Mais j'ai quand même un soucis ma <div> doit faire 900px de large et lorsque je redimensionne cette dernière :

      width:900px;

      elle se redécale vers la gauche.