Wie zentriert man am besten ein <div> auf einer Seite vertikal und horizontal?

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?

John Slegers
Bearbeitete Frage 1. Mai 2018 в 10:41
Programmierung
html css alignment vertical-alignment centering
10. Dezember 2008 в 5:11
12 Aufrufe

Der beste und flexibelste Weg

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).

Dieser Trick funktioniert mit allen Größen von div.

div {
    width: 100px;
    height: 100px;
    background-color: red;

    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;
}
<div></div>
Community
Bearbeitete Antwort 27. Februar 2019 в 5:50
Kommentare (14)

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();
};
Andreas Grech
Bearbeitete Antwort 25. Dezember 2008 в 10:13
Kommentare (3)

Diese Lösung hat bei mir funktioniert

    .middleDiv{
        position : absolute;
        height : 90%;
        bottom: 5%;
    }

(oder Höhe : 70% / Boden : 15%

Höhe : 40% / Boden : 30% ...)

Kommentare (1)