Meilleur moyen de centrer un élément " div> " sur une page à la fois verticalement et horizontalement ?
Je sais que "margin-left : auto ; margin-right : auto;`" permet de centrer l'élément à l'horizontale, mais quelle est la meilleure façon de le faire à la verticale également ?
Ma [démo sur dabblet.com][1]
L'astuce principale dans cette démo est que dans le flux normal des éléments allant de haut en bas, donc la margin-top : auto
est mise à zéro. Cependant, un élément positionné de manière absolue agit de la même manière pour la distribution de l'espace libre, et de la même manière peut être centré verticalement aux top
et bottom
spécifiés (ne fonctionne pas dans IE7).
div
.div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<div></div>
Voici un script que j'ai écrit il y a quelque temps (il est écrit en utilisant la bibliothèque jQuery) :
var centerIt = function (el /* (jQuery element) Element to center */) {
if (!el) {
return;
}
var moveIt = function () {
var winWidth = $(window).width();
var winHeight = $(window).height();
el.css("position","absolute").css("left", ((winWidth / 2) - (el.width() / 2)) + "px").css("top", ((winHeight / 2) - (el.height() / 2)) + "px");
};
$(window).resize(moveIt);
moveIt();
};