Zone Webmasters - Comment centrer des éléments en CSS?

Marge automatique

Cette technique est assez simple, vous devez spécifier les marges de droite et de gauche de votre bloc en automatique et il se positionnera de lui-même au centre de l'écran.

Code CSS

.centre
{
  margin-left   : auto;
  margin-right  : auto;
  width         : 500px;
}

Code XHTML

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

Marge negative

Code CSS

.centre
{
  width        : 250px ;
  height       : 200px ;
  border       : solid black 1px;
  position     : absolute ;
  top          : 50%;       /* On positionne à  50% en haut */
  left         : 50%;       /* On positionne à  50% à  gauche */
  margin-left  : -125px ;   /* On décale la boite vers la gauche de 125 pixels */
  margin-top   : -100px     /* On décale la boite vers le haut de 100 pixels */
}

Code XHTML

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

Imprimer cette publication