Centrer un élément en jQuery ou en css

Il y a plétore d’exemples sur le net pour centrer un élément, soit en pur css soit avec du jquery.

Voici une solution de chaque, qui a le mérite de fonctionner:

En JQuery

jQuery(document).ready(function(){
   jQuery.fn.center = function () {
   this.css("position","absolute");
   this.css("top", ( jQuery(window).height() - this.height() ) / 2  + "px");
   this.css("left", ( jQuery(window).width() - this.width() ) / 2 + "px");
   return this;
}

jQuery('.second').center();
});

On crée la fonction center, que l’on applique ensuite au éléments que l’on souhaite centrer par rapport à la fenetre.

En css

Plus simple et voire plus efficace encore, :

.second{  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);}

cette deuxième solution a l’avantage d’etre complètement dynamique, c’est à dire qu’au redimensionnement de la fenetre, les proportions sont gardées, sans avoir à recharger la page contrairement a la solution JS.

Enfin, autre solution en css si l’on connait la taille des blocs:

la technique consiste à toujours donner à l’élement parent une hauteur (height) une hauteur de ligne (line-height) et un text-align:center, puis dans l’élément à centrer, on rétablit la line height,on met un vertical align middle qui redéplace notre div de quelques pixels pour la remettre bien au centre, et on met le display en inline-block, autrement le centrage ne marche pas:

On a aussi a possibilité d’utiliser display table, ou encore les techniques flex box.Je vous renvoie vers le net ou vous trouverez tout un tas d’article sur le sujet.

sinon je vous renvoie à cette autre possibilité, qui a l’avantage de concerner un maximum de navigateur.

See the Pen centrer une div by yuyazz (@yuyazz) on CodePen.