Beste manier om een <div>
element op een pagina zowel verticaal als horizontaal te centreren?
Ik weet dat margin-left: auto; margin-right: auto;
zal centreren op de horizontale, maar wat is de beste manier om het te doen, ook verticaal?
Mijn demo op dabblet.com
De belangrijkste truc in deze demo is dat in de normale stroom van elementen die van boven naar beneden gaan, dus de margin-top: auto
op nul wordt gezet. Echter, een absoluut gepositioneerd element gedraagt zich hetzelfde voor de verdeling van de vrije ruimte, en kan op dezelfde manier verticaal gecentreerd worden op de opgegeven top
en bottom
(werkt niet in IE7).
div
.div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<div></div>
Hier is een script dat ik een tijdje geleden heb geschreven (het is geschreven met behulp van de jQuery bibliotheek):
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();
};