A melhor maneira de centrar um elemento <div>
numa página tanto vertical como horizontalmente?
Sei que margin-esquerda: auto; margin-direita: auto;
irá centrar-se na horizontal, mas qual é a melhor forma de o fazer verticalmente também?
O truque principal nesta demonstração é que no fluxo normal de elementos indo de cima para baixo, então o margin-top: auto
está definido para zero. Entretanto, um elemento absolutamente posicionado age da mesma forma para distribuição de espaço livre, e similarmente pode ser centrado verticalmente no top
e bottom
especificados (não funciona no IE7).
div
.div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<div></div>
Aqui está um script que escrevi há algum tempo (é escrito usando a biblioteca 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();
};