Mit jQuery ein DIV auf dem Bildschirm zentrieren

Question

Wie lege ich eine <div> in der Mitte des Bildschirms mit jQuery?

Answer 1

Ich möchte auf die großartige Antwort von @TonyL eingehen. Ich füge Math.abs() hinzu, um die Werte zu verpacken, und ich berücksichtige auch, dass jQuery im Modus "kein Konflikt" sein könnte, wie zum Beispiel in WordPress.

Ich empfehle, dass Sie die oberen und linken Werte mit Math.abs() einschließen, wie ich es unten getan habe. Wenn das Fenster zu klein ist und Ihr modaler Dialog ein Schließfeld am oberen Rand hat, verhindert dies das Problem, dass das Schließfeld nicht sichtbar ist. Tonys Funktion hätte potentiell negative Werte gehabt. Ein gutes Beispiel dafür, wie man zu negativen Werten kommt, ist, wenn man einen großen zentrierten Dialog hat, der Endbenutzer aber mehrere Symbolleisten installiert und/oder seine Standardschriftart vergrößert hat - in einem solchen Fall ist das Schließfeld eines modalen Dialogs (wenn es sich am oberen Rand befindet) möglicherweise nicht sichtbar und anklickbar.

Die andere Sache, die ich tue, ist, dies ein bisschen zu beschleunigen, indem ich das $(window)-Objekt zwischenspeichere, so dass ich zusätzliche DOM-Traversalen reduziere, und ich verwende ein Cluster-CSS.

jQuery.fn.center = function ($) {
  var w = $(window);
  this.css({
    'position':'absolute',
    'top':Math.abs(((w.height() - this.outerHeight()) / 2) + w.scrollTop()),
    'left':Math.abs(((w.width() - this.outerWidth()) / 2) + w.scrollLeft())
  });
  return this;
}

Um sie zu verwenden, würden Sie etwa so vorgehen:

jQuery(document).ready(function($){
  $('#myelem').center();
});

Answer 2

Ich würde die jQuery UI position Funktion.

Siehe funktionierende Demo .

<div id="test" style="position:absolute;background-color:blue;color:white">
    test div to center in window
</div>

Wenn ich ein div mit id "test" zu zentrieren dann das folgende Skript würde das div im Fenster auf Dokument bereit zentrieren. (die Standardwerte für "my" und "at" in den Positionsoptionen sind "center")

<script type="text/javascript">
$(function(){
  $("#test").position({
     of: $(window)
  });
};
</script>

Answer 3

Ich möchte einen Punkt korrigieren.

this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");

Der obige Code wird nicht funktionieren, wenn this.height (wir nehmen an, dass der Benutzer die Größe des Bildschirms ändert und der Inhalt dynamisch ist) und scrollTop() = 0 , Beispiel:

window.height es 600
this.height es 650

600 - 650 = -50  

-50 / 2 = -25

Jetzt ist das Feld zentriert -25 Offscreen.

Answer 4

Dies ist noch nicht getestet, aber so etwas sollte funktionieren.

var myElement = $('#myElement');
myElement.css({
    position: 'absolute',
    left: '50%',
    'margin-left': 0 - (myElement.width() / 2)
});

Answer 5

Ich glaube nicht, dass eine absolute Position am besten wäre, wenn Sie ein Element immer in der Mitte der Seite zentriert haben möchten. Sie wollen wahrscheinlich ein festes Element. Ich habe ein anderes Jquery-Zentrierungs-Plugin gefunden, das eine feste Positionierung verwendet. Es heißt feste Mitte .