Aller au contenu principal
Guillaume Duverger Code & graphisme

Centrer verticalement et horizontalement en CSS dans un conteneur de type block

L'objectif de cette démonstration est de vous montrer qu'il est désormais possible de centrer un élément dans un conteneur de type block de manière moderne. Cela n'était pas possible auparavant en ce qui concerne l'alignement vertical, à moins de déclarer un modèle de contenu flex ou grid. Le support navigateur encore limité pour le centrage horizontal.

Je suis centré verticalement dans un conteneur de type block

Je suis centré horizontalement dans un conteneur de type block

Je suis centré verticalement et horizontalement dans un conteneur de type block




<div>
<span>Je suis centré verticalement et/ou horizontalement</span>
</div>






.demo {
  
align-content: center; /*nous avons besoin uniquement de cette propriété pour centrer verticalement*/
justify-items: center; /*centre horizontalement tous les éléments enfants */
height: 300px;

}

.demo span {

justify-self: center;/*pour centrer horizontalement un élément enfant en particulier*/

}