2

Centrer une div

Posté le mardi 26 juin 2012

Trois méthodes simple et entièrement en CSS pour centrer une div à l’écran.

Pour centrer une div orpheline, c’est-à-dire qui n’est contenue dans aucune autre div, trois méthodes s’offrent à nous. Tout d’abord, une méthode simple lorsque l’on connaît les dimensions exactes de la div concernées. Ensuite, la méthode ‘classique’ mais de moins en moins recommandée qui consiste à utiliser les bonnes vieilles tables <tr> et <td>. Enfin, une méthode originale mais efficace utilisant une div ‘fantôme’.
Non, non, n’ayez pas peur, il n’y aura rien d’effrayant dans ce tutoriel.

1. La méthode simple

Si vous débutez en css, vous pourriez naïvement penser que taper position: center ou middle ; dans votre fichier css suffirait à positionner au centre de votre page web votre div. Malheureusement, la propriété ‘position’ n’accepte que les valeurs ‘left’ ou ‘right’ tandis que ‘center’ ou ‘middle’ ne sont pas acceptées.

Maintenant nous pourrions essayer ceci :

nomDeMaDiv {
 position :fixed ;
 top : 50%;
 left: 50%;
}

Mais ce style ne mettra que le coin supérieur gauche de votre div au centre de votre écran et rien d’autre. Ce que nous voulons faire ici, c’est avoir le centre de notre div au centre de l’écran, et non un de ses coins.





Nous, on veut cela :





Et bien voilà la solution pour vraiment centrer cette div :
Ce qu’il faut faire, c’est appliquer pour le margin-top une valeur négative équivalant à la moitié de la hauteur de la div que vous voulez centrer et, pour le margin-left, une seconde valeur négative équivalant à la moitié de la largeur de la div à center.
Euh, … ? Je comprends plus rien.

Mais non, c’est facile. Mettons que notre div fasse une largeur de 400px sur 100px de hauteur. Sachant qu’il faut avoir la moitié de la largeur et de la hauteur nous obtenons donc le code css ci-dessous :

nomDeMaDiv {
 position: fixed ;
top : 50%;
left: 50%;
margin-top: -50px:
margin-left: -200px;
}

 

2. La méthode ‘classique’

Si vous ne connaissez pas les dimensions de la div à centrer, la première méthode ne vous sera pas d’une grande aide. Il vous faudra utiliser les tables comme ci-dessous :

<table style="width:100%;”>
 <tr>
  <td style=”text-align: center; vertical-align: middle;”>
   Ce que vous devez centrer.
  </td>
 </tr>
</table>

Vous pouvez changer la table et les <tr> et <td> en divs et en jouant avec les css.
Voyez ci-dessous pour la partie HTML :

<div class=”nomDeMaDiv”>
 <div class=”SecondeDiv”>
    Ce que vous devez centrer.
  </div>
</div>

Et pour la partie CSS :

.nomDeMaDiv {
 display: table;
 width: 100%;
}

.SecondeDiv {
 display: table-cell;
 text-align: center;
 vertical-align: middle;
}

Cette méthode a le désavantage d’être compliquée, instable et de surcroît mal référençable. Je vous la déconseille donc.

 

3. La méthode alternative

Dans une div mesurant 100% de largeur, si vous utilisez les pseudo-éléments, vous pouvez obtenir le même résultat que la méthode précédente. Le pseudo-élément sert ici de div ‘fantôme’ ou si vous préférez, de div ‘invisible’ pour garder la div contenant votre texte ou votre image parfaitement centrée. Pour cela, vous devez appliquer ‘vertical-align : middle’ au pseudo-élément et à la div.
Sur votre document HTML ou PHP, suivez l’exemple ci-dessous :

<div class="block">
 <div class="divAcentrer">
  Votre contenu texte ou image.
 </div>
</div>

Et pour le CSS :

.block {
 height:500px;
 text-align: center;
 background-color:yellow;
}

/*Le pseudo-element qui met la div au centre*/
.block:before {
 content: '';
 display: inline-block;
 height: 100%;
 vertical-align: middle;
 margin-right: -0.25em; /*Changez cette valeur si besoin*/
 background-color:blue;
}

.divAcentrer {
 display: inline-block;
 vertical-align: middle;
 width:300px; /*Modifiez cette valeur selon votre convenance. Si vous voulez mettre une image pour le contenu, effacez 300px et mettez auto*/
 text-align:left;
 background-color:orange;
}

Et voilà le résultat :




A mon avis, cette méthode est la meilleur. Malheureusement, elle ne marche qu’à partir de la version 8 d’Internet Explorer car les versions antérieur ne supportent pas les pseudo-éléments css.

Conclusion

Comme vous l’avez lu, plusieurs méthodes existent. A vous de prendre celle qui vous convient le mieux. En attendant, nous aurons peut-être dans le futur une façon plus ‘standard’ de faire et surtout plus propre.

Bon centrage !

Posté dans CSS, HTML | 2 commentaires

Philippe da Cruz
a dit le
mercredi 12 avril 2017 à 12:40 :


Merci beaucoup. Je suis content d’avoir pu vous être utile.
Reply

Laisser un commentaire