web-dev-qa-db-de.com

Mit jQuery ein DIV auf dem Bildschirm zentrieren

Wie kann ich mit jQuery einen <div> in der Mitte des Bildschirms einstellen?

javascriptjqueryhtmlcsslayout
736
Craig

Ich mag es, Funktionen zu jQuery hinzuzufügen, so dass diese Funktion helfen würde:

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;
}

Jetzt können wir einfach schreiben:

$(element).center();

Demo: Fiddle (mit hinzugefügtem Parameter)

1053
Tony L.

Ich habe hier ein Jquery Plugin

Sehr kurze Version

$('#myDiv').css({top:'50%',left:'50%',margin:'-'+($('#myDiv').height() / 2)+'px 0 0 -'+($('#myDiv').width() / 2)+'px'});

KURZE VERSION

(function($){
    $.fn.extend({
        center: function () {
            return this.each(function() {
                var top = ($(window).height() - $(this).outerHeight()) / 2;
                var left = ($(window).width() - $(this).outerWidth()) / 2;
                $(this).css({position:'absolute', margin:0, top: (top > 0 ? top : 0)+'px', left: (left > 0 ? left : 0)+'px'});
            });
        }
    }); 
})(jQuery);

Durch diesen Code aktiviert:

$('#mainDiv').center();

PLUGIN-VERSION

(function($){
     $.fn.extend({
          center: function (options) {
               var options =  $.extend({ // Default values
                    inside:window, // element, center into window
                    transition: 0, // millisecond, transition time
                    minX:0, // pixel, minimum left element value
                    minY:0, // pixel, minimum top element value
                    withScrolling:true, // booleen, take care of the scrollbar (scrollTop)
                    vertical:true, // booleen, center vertical
                    horizontal:true // booleen, center horizontal
               }, options);
               return this.each(function() {
                    var props = {position:'absolute'};
                    if (options.vertical) {
                         var top = ($(options.inside).height() - $(this).outerHeight()) / 2;
                         if (options.withScrolling) top += $(options.inside).scrollTop() || 0;
                         top = (top > options.minY ? top : options.minY);
                         $.extend(props, {top: top+'px'});
                    }
                    if (options.horizontal) {
                          var left = ($(options.inside).width() - $(this).outerWidth()) / 2;
                          if (options.withScrolling) left += $(options.inside).scrollLeft() || 0;
                          left = (left > options.minX ? left : options.minX);
                          $.extend(props, {left: left+'px'});
                    }
                    if (options.transition > 0) $(this).animate(props, options.transition);
                    else $(this).css(props);
                    return $(this);
               });
          }
     });
})(jQuery);

Durch diesen Code aktiviert:

$(document).ready(function(){
    $('#mainDiv').center();
    $(window).bind('resize', function() {
        $('#mainDiv').center({transition:300});
    });
);

ist das richtig ?

UPDATE:

Von CSS-Tricks

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* Yep! */
  width: 48%;
  height: 59%;
}
138
molokoloco

Ich würde jQueryUI Position Utility empfehlen

$('your-selector').position({
    of: $(window)
});

das gibt Ihnen viel mehr Möglichkeiten als nur Zentrieren ...

59
cetnar

Hier ist mein Los. Am Ende habe ich es für meinen Lightbox-Klon verwendet. Der Hauptvorteil dieser Lösung besteht darin, dass das Element automatisch zentriert bleibt, auch wenn die Größe des Fensters geändert wird, wodurch es ideal für diese Art von Verwendung ist.

$.fn.center = function() {
    this.css({
        'position': 'fixed',
        'left': '50%',
        'top': '50%'
    });
    this.css({
        'margin-left': -this.outerWidth() / 2 + 'px',
        'margin-top': -this.outerHeight() / 2 + 'px'
    });

    return this;
}
39
Juho Vepsäläinen

Sie können CSS allein zum Zentrieren verwenden:

Arbeitsbeispiel

.center{
    position: absolute;
    height: 50px;
    width: 50px;
    background:red;
    top:calc(50% - 50px/2); /* height divided by 2*/
    left:calc(50% - 50px/2); /* width divided by 2*/
}
<div class="center"></div>

Mit calc() können Sie grundlegende Berechnungen in css durchführen.

MDN-Dokumentation für calc()
Browser-Supporttabelle

25
apaul

Ich erweitere die großartige Antwort von @TonyL. Ich füge Math.abs () hinzu, um die Werte einzuhüllen, und ich berücksichtige auch, dass sich jQuery im Modus "Kein Konflikt" befindet, wie beispielsweise in WordPress.

Ich empfehle, dass Sie die oberen und linken Werte mit Math.abs () umschließen, wie ich es unten gemacht habe. Wenn das Fenster zu klein ist und das modale Dialogfeld oben ein Schließfeld hat, wird das Problem vermieden, dass das Schließfeld nicht angezeigt wird. Tonys Funktion hätte möglicherweise negative Werte gehabt. Ein gutes Beispiel dafür, wie Sie negative Werte erhalten, ist, wenn Sie ein großes zentriertes Dialogfeld haben, der Endbenutzer jedoch mehrere Symbolleisten installiert und/oder seine Standardschriftart erhöht hat - in einem solchen Fall das Schließfeld in einem modalen Dialogfeld (wenn oben) möglicherweise nicht sichtbar und anklickbar.

Die andere Sache, die ich mache, ist etwas schneller, indem ich das $ (window) -Objekt zwischenspeichere, so dass ich zusätzliche DOM-Traversierungen reduziere und ein Cluster-CSS verwende.

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 zu verwenden, würden Sie so etwas tun:

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

Ich würde die jQuery UIposition Funktion verwenden.

Siehe Arbeitsdemo.

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

Wenn ich ein div mit der ID "test" zum Zentrieren habe, würde das folgende Skript das div im Fenster auf das Dokument ready zentrieren. (Die Standardwerte für "my" und "at" in den Positionsoptionen sind "center").

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

Ich möchte ein Problem korrigieren.

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

Der obige Code funktioniert nicht in Fällen, in denen this.height (nehmen wir an, dass der Benutzer die Bildschirmgröße ändert und der Inhalt dynamisch ist) und scrollTop() = 0, Beispiel: 

window.height ist 600
this.height ist 650

600 - 650 = -50  

-50 / 2 = -25

Jetzt ist die Box -25 außerhalb des Bildschirms zentriert.

8
John Butcher

Ich glaube nicht, dass eine absolute Position am besten ist, wenn Sie möchten, dass ein Element immer in der Mitte der Seite zentriert ist. Sie möchten wahrscheinlich ein festes Element. Ich habe ein anderes Jquery-Zentrier-Plugin gefunden, das eine feste Positionierung verwendete. Es heißt feste Mitte .

6
Fred

Dies ist nicht getestet, aber so etwas sollte funktionieren.

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

Um das Element relativ zum Browser-Ansichtsfenster (Fenster) zu zentrieren, verwenden Sie nicht position: absolute. Der korrekte Positionswert sollte fixed sein (absolut bedeutet: "Das Element ist relativ zu seinem ersten positionierten (nicht statischen) Vorfahrenelement positioniert"). 

Bei dieser alternativen Version des vorgeschlagenen Center-Plugins wird "%" anstelle von "px" verwendet. Wenn Sie die Größe des Fensters ändern, wird der Inhalt zentriert:

$.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 margin: 0 angeben, um die Inhaltsränder von der Breite/Höhe auszuschließen (da wir die Position fix verwenden, macht das Ränder keinen Sinn). Gemäß dem jQuery-Dokument, das .outerWidth(true) verwendet, sollten Ränder eingeschlossen sein, aber es funktionierte nicht wie erwartet, als ich es in Chrome versuchte.

Die 50*(1-ratio) kommt aus:

Fensterbreite: W = 100%

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

Sie, um die zentrierte linke zu berechnen: 

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

Die Übergangskomponente dieser Funktion hat für mich in Chrome sehr schlecht funktioniert (anderswo nicht getestet). Ich veränderte das Fenster um eine Menge und mein Element bewegte sich langsam und versuchte, aufzuholen. 

Die folgende Funktion kommentiert diesen Teil. Außerdem fügte ich Parameter hinzu, um optionale X & Y-Boolesche Werte zu übergeben, wenn Sie vertikal, aber nicht horizontal zentrieren möchten, zum Beispiel:

// 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);
4
Eric D. Fields

Bearbeiten:

Wenn mir die Frage etwas beigebracht hat, dann ist das so: Ändere nichts, was schon funktioniert :)

Ich gebe eine (fast) wörtliche Kopie davon, wie dies auf http://www.jakpsatweb.cz/css/css-vertical-center-solution.html gehandhabt wurde. _ - es ist stark gehackt für IE bietet jedoch eine reine CSS-Antwort auf die 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;}

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

Ich habe dies durch Browsershots durchgeführt und es scheint gut zu sein; Wenn nicht anders, halte ich das Original unten, damit die prozentuale Margin-Behandlung, wie von der CSS-Spezifikation vorgegeben, das Tageslicht erblickt.

Original:

Sieht aus wie ich zu spät zur Party bin!

Es gibt einige Kommentare, die darauf hinweisen, dass dies eine CSS-Frage ist - Trennung von Anliegen und allem. Lassen Sie mich vorwegnehmen, indem Sie sagen, dass sich CSS wirklich auf diesem Fuß in den Fuß geschossen hat. Ich meine, wie einfach wäre das zu tun:

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

Recht? Die obere linke Ecke des Containers befindet sich in der Mitte des Bildschirms. Bei negativen Rändern wird der Inhalt magisch in der absoluten Mitte der Seite wieder angezeigt. http://jsfiddle.net/rJPPc/

Falsch! Horizontale Positionierung ist OK, aber vertikal ... Oh, ich verstehe. Anscheinend wird in css beim Einstellen der oberen Ränder in% der Wert berechnet als ein Prozentsatz immer relativ zu width des enthaltenden Blocks . Wie Äpfel und Orangen! Wenn Sie mir oder Mozilla Doco nicht vertrauen, spielen Sie mit der oben genannten Geige, indem Sie die Breite des Inhalts anpassen, und staunen Sie.

...

Nun, da CSS mein Brot und Butter ist, wollte ich nicht aufgeben. Gleichzeitig bevorzuge ich die Dinge einfach, also habe ich mir die Erkenntnisse eines Czech CSS Guru geliehen und daraus eine funktionierende Geige gemacht. Um es kurz zu machen, erstellen wir eine Tabelle, in der die vertikale Ausrichtung auf Mitte steht:

<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 gutem alten margin verfeinert: 0 auto;:

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

Geige arbeiten wie versprochen: http://jsfiddle.net/teDQ2/

4
o.v.

Das ist toll. Ich habe eine Rückruffunktion 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
   }
}
4
Keith

Was ich hier habe, ist eine "center" -Methode, die sicherstellt, dass das Element, das Sie zentrieren möchten, nicht nur "fixiert" oder "absolut" ist, sondern auch, dass das zu zentrierende Element kleiner ist als das übergeordnete Element Wenn das Element parent kleiner als das Element selbst ist, wird das DOM auf das nächste übergeordnete Element verteilt und relativ dazu zentriert. 

$.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');
        }
    };
3
Ryan

Bitte benutzen Sie diese: 

$(window).resize(function(){
    $('.className').css({
        position:'absolute',
        left: ($(window).width() - $('.className').outerWidth())/2,
        top: ($(window).height() - $('.className').outerHeight())/2
    });
});

// To initially run the function:
$(window).resize();
2
satya

ich benutze das:

$(function() {
   $('#divId').css({
    'left' : '50%',
    'top' : '50%',
    'position' : 'absolute',
    'margin-left' : -$('#divId').outerWidth()/2,
    'margin-top' : -$('#divId').outerHeight()/2
  });
});
2
holden

Normalerweise würde ich das nur mit CSS machen ... aber da haben Sie nach einem Weg gefragt, mit jQuery dies zu tun ...

Der folgende Code zentriert ein div sowohl horizontal als auch vertikal in seinem Container:

$("#target").addClass("centered-content")
            .wrap("<div class='center-outer-container'></div>")
            .wrap("<div class='center-inner-container'></div>");
body {
    margin : 0;
    background: #ccc;
}

.center-outer-container {
    position : absolute;
    display: table;
    width: 100%;
    height: 100%;
}

.center-inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<div id="target">Center this!</div>

(siehe auch this Fiddle )

0
John Slegers

CSS-Lösung Nur in zwei Zeilen  

Sie zentriert Ihr inneres Div horizontal und vertikal.

#outer{
  display: flex;
}
#inner{
margin: auto;

}

für nur horizontal ausrichten, ändern 

margin: 0 auto;

und für vertikal ändern

margin: auto 0;
0
Shivam Chhetri

Keine Notwendigkeit für diese Frage

Ich habe dieses Element benutzt, um das Div-Element zu zentrieren.

.black_overlay{
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}

.white_content {
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    padding: 16px;
    border: 16px solid orange;
    background-color: white;
    z-index:1002;
    overflow: auto;
}

Element öffnen

$(document).ready(function(){
    $(".open").click(function(e){
      $(".black_overlay").fadeIn(200);
    });

});
0
Sajitha Rathnayake

Hier ist meine Version. Ich kann es ändern, nachdem ich mir diese Beispiele angesehen habe.

$.fn.pixels = function(property){
    return parseInt(this.css(property));
};

$.fn.center = function(){
    var w = $($w);
    return this.each(function(){
        $(this).css("position","absolute");
        $(this).css("top",((w.height() - $(this).height()) / 2) - (($(this).pixels('padding-top') + $(this).pixels('padding-bottom')) / 2) + w.scrollTop() + "px");
        $(this).css("left",((w.width() - $(this).width()) / 2) - (($(this).pixels('padding-left') + $(this).pixels('padding-right')) / 2) + w.scrollLeft() + "px");
    });
};
0
Andy

MEINE AKTUALISIERUNG VON TONY L'S ANTWORT Dies ist die modifizierte Version seiner Antwort, die ich jetzt religiös benutze. Ich dachte, ich würde es teilen, da es etwas mehr Funktionalität für verschiedene Situationen hinzufügt, z. B. verschiedene Arten von position oder nur horizontale/vertikale Zentrierung als beides. 

center.js:

// We add a pos parameter so we can specify which position type we want

// Center it both horizontally and vertically (dead center)
jQuery.fn.center = function (pos) {
    this.css("position", pos);
    this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
    this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
    return this;
}

// Center it horizontally only
jQuery.fn.centerHor = function (pos) {
    this.css("position", pos);
    this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
    return this;
}

// Center it vertically only
jQuery.fn.centerVer = function (pos) {
    this.css("position", pos);
    this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
    return this;
}

In meinem <head>:

<script src="scripts/center.js"></script>

Anwendungsbeispiele:

$("#example1").centerHor("absolute")
$("#example2").centerHor("fixed")

$("#example3").centerVer("absolute")
$("#example4").centerVer("fixed")

$("#example5").center("absolute")
$("#example6").center("fixed")

Es kann mit jeder Positionierungsart verwendet werden und kann auf Ihrem gesamten Standort problemlos verwendet werden. Außerdem kann es problemlos an jeden anderen Standort übertragen werden, den Sie erstellen. Keine lästigen Workarounds mehr, um etwas richtig zu zentrieren. 

Hoffe, das ist nützlich für jemanden da draußen! Genießen.

0
Fata1Err0r

sie erhalten diesen schlechten Übergang, weil Sie die Position des Elements jedes Mal anpassen, wenn das Dokument gescrollt wird. Sie möchten eine feste Positionierung verwenden. Ich habe das oben aufgeführte Fixed-Center-Plugin ausprobiert und scheint das Problem gut zu lösen. Durch die feste Positionierung können Sie ein Element einmal zentrieren. Die CSS-Eigenschaft sorgt dafür, dass diese Position bei jedem Bildlauf für Sie beibehalten wird.

0
skaterdav85

Viele Möglichkeiten dies zu tun. Mein Objekt wird mit display: none nur innerhalb des BODY-Tags versteckt, sodass die Positionierung relativ zum BODY ist. Nach der Verwendung von $ ("# object_id"). Show () rufe ich $ ("# object_id"). Center () auf.

Ich benutze position: absolute , weil es insbesondere auf einem kleinen mobilen Gerät möglich ist, dass das modale Fenster größer ist als das Gerätefenster. In diesem Fall könnte ein Teil des modalen Inhalts nicht erreichbar sein, wenn die Positionierung fixiert wurde.

Hier ist mein Geschmack basierend auf den Antworten anderer und meinen spezifischen Bedürfnissen:

$.fn.center = function () {
        this.css("position","absolute");

        //use % so that modal window will adjust with browser resizing
        this.css("top","50%");
        this.css("left","50%");

        //use negative margin to center
        this.css("margin-left",(-1*this.outerWidth()/2)+($(window).scrollLeft())+"px");
        this.css("margin-top",(-1*this.outerHeight()/2)+($(window).scrollTop())+"px");

        //catch cases where object would be offscreen
        if(this.offset().top<0)this.css({"top":"5px","margin-top":"0"});
        if(this.offset().left<0)this.css({"left":"5px","margin-left":"0"});

        return this;
    };
0
i_a