Wie kann ich mit jQuery ein DIV auf dem Bildschirm zentrieren?

Zentrieren eines DIV auf dem Bildschirm mit jQuery

Das Positionieren eines HTML-Elements in der Mitte des Bildschirms kann eine häufige Aufgabe beim Erstellen von Web sein Anwendungen. In diesem Artikel wird eine robuste Methode mit jQuery untersucht, um diese Funktionalität effektiv zu erreichen.

Lösung:

Um ein DIV-Element mit jQuery auf dem Bildschirm zu zentrieren, verwenden Sie das folgende Codefragment :

jQuery.fn.center = function () {
    this.css("position", "absolute");
    this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + 
                                    $(window).scrollTop()) + "px");
    this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + 
                                    $(window).scrollLeft()) + "px");
    return this;
};

Diese Funktion positioniert das DIV-Element absolut auf dem Bildschirm und bestimmt seinen oberen und linken Versatz dynamisch basierend auf den Fensterabmessungen und dem Abmessungen des Elements.

Verwendung:

Sobald die Funktion definiert ist, können Sie jedes DIV-Element einfach zentrieren, indem Sie es aufrufen:

$(element).center();

Dadurch wird das ausgerichtet Element genau in der vertikalen und horizontalen Mitte des Bildschirms.

Zusätzlich Hinweis:

Die Funktion enthält auch einen Parameter zum Anpassen des vertikalen Versatzes. Um das Element beispielsweise 50 Pixel von oben zu zentrieren, würden Sie Folgendes verwenden:

$(element).center({top: -50});

Das obige ist der detaillierte Inhalt vonWie kann ich mit jQuery ein DIV auf dem Bildschirm zentrieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!