• CSS > centrer verticalement

      display:table-cell permet d’indiquer qu’un élément doit se comporter comme une cellule d’un tableau, sur laquelle le vertical-align:middle peut fonctionner.

       

      Sinon:  Flexbox.

       

      Conventions d’écriture : tous les exemples présentent des éléments <div> munis des classes .parent et .enfant.

      UNE SEULE LIGNE

      Aligner verticalement un mot/ligne au sein de son conteneur : propriété line-height et lui indiquer la même valeur que son parent.

       

      HTML :

      <div class="parent">
  <div class="enfant">centré verticalement</div>
</div>

       

      CSS :

      .parent {
  height: 20em; /* hauteur du parent */
  line-height: 20em; /* hauteur de ligne (identique) */
  white-space: nowrap; /* interdiction de passer à la ligne */
}

      DANS LA FENÊTRE

      Centrer un élément au sein de la fenêtre d’affichage quelle que soit sa hauteur : grace aux unités de viewport (vh) combinées aux translations CSS3.

       

      HTML :

      <div class="element">centré verticalement</div>

       

      CSS :

      .element {
  margin-top: 50vh; /* poussé de la moitié de hauteur de viewport */
  transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
}

      VIA table-cell

      vertical-align: middle.

       

      HTML :

      <div class="parent">
  <div class="enfant">centré verticalement</div>
</div>

       

      CSS :

      .parent {
  display: table-cell; /* comportement visuel de cellule */
  vertical-align: middle;
}

        Inconvénients : les tableaux nécessitent certains aménagements pour éviter les débordements de contenus (table-layout: fixed et largeur définie)

          VIA position: absolute

          HTML :

          <div class="parent">
   <div class="enfant">centré verticalement</div>
</div>

          CSS :

          .parent {
   position: relative;
}
.enfant {
   position: absolute;
   top: 50%; /* poussé de la moitié de hauteur du référent */
   transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
}

            Inconvénients : sortie du flux

              VIA flexbox

              Méthode 1 : indique l’alignement sur l’enfant

              HTML :

              <div class="parent">
   <div class="enfant">centré verticalement</div>
</div>

               

              CSS :

              .parent {
  display: flex; /* contexte sur le parent */
}
.enfant {
  margin: auto; /* eh oui, tout bêtement */
}

              Méthode 2 : indique l’alignement sur le parent

              HTML :

              <div class="parent">
   <div class="enfant">centré verticalement</div>
</div>

               

              CSS :

              .parent {
  display: flex; /* contexte sur le parent */
  flex-direction: column; /* direction d'affichage verticale */
  justify-content: center; /* alignement vertical */
}

                Avantages : pas de sortie du flux, nul besoin de fixer ou connaître la hauteur du parent, pas de bidouilles

                 

                Note : cette technique via Flexbox fonctionne aussi en employant la déclaration align-items: center; si vous demeurez dans l’axe horizontal par défaut (flex-direction: row).

                Ressources

             

            Aucun commentaire

             

            Laissez un commentaire