Centrer un élément dans tous les navigateurs

On a déjà vu dans cet article notamment comment on pouvait centrer en jquery ou en css.

Aujourd’hui je vais m’appuyer sur une autre technique qui date mais qui a l’avantage de fonctionner aussi sur le navigateur safari, en plus de tous les autres.En effet sur safari la technique bien connue qui consiste à placer un élément absolute en top:50% et left:50% peut poser des problèmes d’affichage

Voici donc le code amélioré:

.divparent {
  position: relative;
}

.divenfant {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

Ici on place donc tous les curseurs (top left bottom et right) à 0, on applique un margin auto, et c’est surtout la hauteur (height) qui est importante.Les valeurs sont données à titre indicatif et doivent bien sur etre modifiés en fonction de votre site.