Wie zentriert man am besten ein "div"-Element auf einer Seite sowohl vertikal als auch horizontal?
Ich weiß, dass margin-left: auto; margin-right: auto;
auf der Horizontalen zentriert, aber was ist der beste Weg, um es auch vertikal zu tun?
Meine Demo auf dabblet.com
Der Haupttrick in dieser Demo ist, dass im normalen Fluss der Elemente von oben nach unten, so dass die margin-top: auto
auf Null gesetzt ist. Allerdings wirkt ein absolut positioniertes Element das gleiche für die Verteilung des freien Raums, und ähnlich kann vertikal an der angegebenen top
und bottom
zentriert werden (funktioniert nicht 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 ist ein Skript, das ich vor einiger Zeit geschrieben habe (es ist mit der jQuery-Bibliothek geschrieben):
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();
};