Centrer verticalement un élément en CSS est parfois difficile surtout quand il s'agit de pseudos éléments tels que :before ou :after. Toutefois, grâce à la propriété flex, cela devient plus facile.

Voici un exemple simple montrant un élément aligné verticalement. Il s'agit ici d'aligner une flèche d'un tableau servant à indiquer le sens de tri d'une colonne.

th::after {
  content: "↑";
  position: absolute;
  top: 0;
  right: 0;
  width: 30%;
  height: 100%;
  display:flex;
  flex-direction:row;
  align-items: center;
  justify-content: center;
}

 

---

9 août 2019 - Wakonda - CSS