Mit jQuery ein DIV auf dem Bildschirm zentrieren

Question

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

Answer 1

Edita:

Wenn mich die Frage etwas gelehrt hat, dann dies: Ändere nichts, was bereits funktioniert :)

Ich gebe eine (fast) wortwörtliche Kopie davon ab, wie dies bei http://www.jakpsatweb.cz/css/css-vertical-center-solution.html - es ist stark gehackt für IE, sondern bietet eine reine CSS Weg zur Beantwortung der Frage:

.container {display:table; height:100%; position:absolute; overflow:hidden; width:100%;}
.helper    {#position:absolute; #top:50%;
            display:table-cell; vertical-align:middle;}
.content   {#position:relative; #top:-50%;
            margin:0 auto; width:200px; border:1px solid orange;}

Fiedel: http://jsfiddle.net/S9upd/4/

Ich habe dies durch browsershots laufen lassen und es scheint in Ordnung zu sein; wenn für nichts anderes, werde ich das Original unten halten, so dass Marge Prozentsatz Handhabung wie von CSS-Spezifikation diktiert sieht das Licht des Tages.

Original:

Sieht aus, als käme ich zu spät zur Party!

Einige der obigen Kommentare deuten darauf hin, dass es sich hierbei um eine CSS-Frage handelt - Trennung der Interessen und so weiter. Ich möchte vorausschicken, dass CSS wirklich hat sich in diesem Fall selbst ins Bein geschossen. Ich meine, wie einfach wäre es, dies zu tun:

.container {
    position:absolute;
    left: 50%;
    top: 50%;
    overflow:visible;
}
.content {
    position:relative;
    margin:-50% 50% 50% -50%;
}

Richtig? Die linke obere Ecke des Containers wäre in der Mitte des Bildschirms, und mit negativen Rändern würde der Inhalt auf magische Weise wieder in der absoluten Mitte der Seite erscheinen! http://jsfiddle.net/rJPPc/

Falsch! Die horizontale Positionierung ist OK, aber die vertikale... Oh, ich verstehe. Offenbar wird in CSS bei der Festlegung der oberen Ränder in % der Wert wie folgt berechnet ein Prozentsatz immer relativ zum Breite des enthaltenen Blocks . Wie Äpfel und Birnen! Wenn Sie mir oder der Mozilla-Doku nicht trauen, spielen Sie mit dem obigen Fiddle, indem Sie die Breite des Inhalts anpassen und staunen Sie.

---

Da CSS mein tägliches Brot ist, wollte ich nicht aufgeben. Gleichzeitig bevorzuge ich einfache Dinge, also habe ich mir die Erkenntnisse eines Tschechischer CSS-Guru und machte daraus eine funktionierende Geige. Lange Rede, kurzer Sinn, wir erstellen eine Tabelle, in der vertical-align auf Mitte gesetzt ist:

<table class="super-centered"><tr><td>
    <div class="content">
        <p>I am centered like a boss!</p>
    </div>
</td></tr></table>

Und dann wird die Position des Inhalts mit dem guten alten Marge:0 auto; :

.super-centered {position:absolute; width:100%;height:100%;vertical-align:middle;}
.content {margin:0 auto;width:200px;}

Wie versprochen funktioniert die Fiedel: http://jsfiddle.net/teDQ2/

Answer 2

Um das Element relativ zum Viewport (Fenster) des Browsers zu zentrieren, verwenden Sie nicht position: absolute sollte der korrekte Positionswert sein fixed (absolut bedeutet: "Das Element wird relativ zu seinem ersten positionierten (nicht statischen) Vorgängerelement positioniert").

Diese alternative Version des vorgeschlagenen Zentrier-Plugins verwendet "%" anstelle von "px", so dass bei einer Größenänderung des Fensters der Inhalt zentriert bleibt:

$.fn.center = function () {
    var heightRatio = ($(window).height() != 0) 
            ? this.outerHeight() / $(window).height() : 1;
    var widthRatio = ($(window).width() != 0) 
            ? this.outerWidth() / $(window).width() : 1;

    this.css({
        position: 'fixed',
        margin: 0,
        top: (50*(1-heightRatio)) + "%",
        left: (50*(1-widthRatio))  + "%"
    });

    return this;
}

Sie müssen die margin: 0 um die Ränder des Inhalts von der Breite/Höhe auszuschließen (da wir die feste Position verwenden, macht es keinen Sinn, Ränder zu haben). Laut der jQuery-Dokumentation mit .outerWidth(true) sollte Ränder enthalten, aber in Chrome funktionierte es nicht wie erwartet.

En 50*(1-ratio) kommt von:

Fensterbreite: W = 100%

Elementbreite (in %): w = 100 * elementWidthInPixels/windowWidthInPixels

Sie kalkulieren die zentrierte Linke:

 left = W/2 - w/2 = 50 - 50 * elementWidthInPixels/windowWidthInPixels =
 = 50 * (1-elementWidthInPixels/windowWidthInPixels)

Answer 3

Das ist großartig. Ich habe eine Callback-Funktion hinzugefügt

center: function (options, callback) {

if (options.transition > 0) {
   $(this).animate(props, options.transition, callback);
} else { 
    $(this).css(props);
   if (typeof callback == 'function') { // make sure the callback is a function
       callback.call(this); // brings the scope to the callback
   }
}

Answer 4

Die Übergangskomponente dieser Funktion funktionierte bei mir in Chrome sehr schlecht (ich habe es nicht anderswo getestet). Ich würde die Größe des Fensters ein Bündel und mein Element würde Art von scoot um langsam, versuchen, aufzuholen.

Die folgende Funktion kommentiert also diesen Teil aus. Außerdem habe ich Parameter für die Übergabe von optionalen x- und y-Booleschen Werten hinzugefügt, wenn Sie z. B. vertikal, aber nicht horizontal zentrieren möchten:

// Center an element on the screen
(function($){
  $.fn.extend({
    center: function (x,y) {
      // var options =  $.extend({transition:300, minX:0, minY:0}, options);
      return this.each(function() {
                if (x == undefined) {
                    x = true;
                }
                if (y == undefined) {
                    y = true;
                }
                var $this = $(this);
                var $window = $(window);
                $this.css({
                    position: "absolute",
                });
                if (x) {
                    var left = ($window.width() - $this.outerWidth())/2+$window.scrollLeft();
                    $this.css('left',left)
                }
                if (!y == false) {
            var top = ($window.height() - $this.outerHeight())/2+$window.scrollTop();   
                    $this.css('top',top);
                }
        // $(this).animate({
        //   top: (top > options.minY ? top : options.minY)+'px',
        //   left: (left > options.minX ? left : options.minX)+'px'
        // }, options.transition);
        return $(this);
      });
    }
  });
})(jQuery);

Answer 5

Was ich hier habe, ist eine "Center"-Methode, die sicherstellt, dass das Element, das Sie versuchen, zu zentrieren ist nicht nur von "festen" oder "absolute" Positionierung, aber es stellt auch sicher, dass das Element, das Sie zentrieren ist kleiner als seine Eltern, diese Zentren und Element relativ zu ist Elternteil, wenn die Elemente Elternteil kleiner ist als das Element selbst, wird es Plünderung der DOM auf die nächste übergeordnete, und zentrieren Sie es relativ zu, dass.

$.fn.center = function () {
        /// <summary>Centers a Fixed or Absolute positioned element relative to its parent</summary>

        var element = $(this),
            elementPos = element.css('position'),
            elementParent = $(element.parent()),
            elementWidth = element.outerWidth(),
            parentWidth = elementParent.width();

        if (parentWidth <= elementWidth) {
            elementParent = $(elementParent.parent());
            parentWidth = elementParent.width();
        }

        if (elementPos === "absolute" || elementPos === "fixed") {
            element.css('right', (parentWidth / 2) - elementWidth / 2 + 'px');
        }
    };