Wie setze ich <div>mit jQuery ein in der Mitte des Bildschirms?

Ich mag es, jQuery Funktionen hinzuzufügen, damit 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 zusätzlichem Parameter)

Ich habe ein jQuery - Plugin hier

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

Aktiviert durch diesen Code:

$('#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);

Aktiviert durch diesen Code:

$(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%;
}

Ich würde das Dienstprogramm jQueryUI Position empfehlen

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

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

Hier ist mein Versuch. 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 Fenstergröße geändert wird, was es ideal für diese Art der Verwendung macht.

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

Sie können CSS allein verwenden, um wie folgt zu zentrieren:

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>

calc() ermöglicht es Ihnen, grundlegende Berechnungen in CSS durchzuführen.

MDN-Dokumentation für die calc()
Browser-Unterstützungstabelle

Ich erweitere die großartige Antwort von @TonyL. Ich füge Math.abs () hinzu, um die Werte zu verpacken, und ich berücksichtige auch, dass sich jQuery möglicherweise im Modus "Kein Konflikt" befindet, wie zum Beispiel in WordPress.

Ich empfehle, dass Sie die oberen und linken Werte mit Math.abs () umschließen, wie ich es unten getan habe. Wenn das Fenster zu klein ist und Ihr modaler Dialog oben ein Schließfeld enthält, 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 diesem Fall das Schließfeld in einem modalen Dialogfeld (wenn oben) ist möglicherweise nicht sichtbar und anklickbar.

Das andere, was ich mache, ist, dies ein wenig zu beschleunigen, indem ich das $ (Fenster) -Objekt zwischenspeichere, damit ich zusätzliche DOM-Durchläufe 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 etwas tun wie:

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

Ich würde die jQuery UI- position 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 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>

Ich möchte ein Problem beheben.

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

Der this.heightobige Code funktioniert nicht in Fällen, in denen (angenommen wird, dass der Benutzer die Größe des Bildschirms ändert und der Inhalt dynamisch ist) und zum scrollTop() = 0Beispiel:

window.heightist 600
this.heightist650

600 - 650 = -50  

-50 / 2 = -25

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

Dies ist nicht getestet, aber so etwas sollte funktionieren.

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

Ich denke nicht, dass eine absolute Position am besten wäre, wenn Sie ein Element immer in der Mitte der Seite zentrieren möchten. Sie möchten wahrscheinlich ein festes Element. Ich habe ein anderes Plugin für die JQuery-Zentrierung gefunden, das eine feste Positionierung verwendet. Es heißt festes Zentrum .

Die Übergangskomponente dieser Funktion hat in Chrome für mich sehr schlecht funktioniert (nicht anderswo getestet). Ich würde die Größe des Fensters ein paar Mal ändern und mein Element würde langsam herumrutschen und versuchen, aufzuholen.

Die folgende Funktion kommentiert diesen Teil aus. Außerdem habe ich Parameter für die Übergabe optionaler x & y-Boolescher Werte hinzugefügt, 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);

Um das Element relativ zum Browser-Ansichtsfenster (Fenster) zu zentrieren, verwenden Sie nicht position: absoluteden korrekten Positionswert fixed(absolut bedeutet: "Das Element wird relativ zu seinem ersten positionierten (nicht statischen) Vorfahrenelement positioniert").

Diese alternative Version des vorgeschlagenen Center-Plugins verwendet "%" anstelle von "px". Wenn Sie also die Größe des Fensters ändern, bleibt 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 setzen margin: 0, um die Inhaltsränder von der Breite / Höhe auszuschließen (da wir eine feste Position verwenden, macht es keinen Sinn, Ränder zu haben). Laut dem jQuery-Dokument .outerWidth(true)sollte die Verwendung Ränder enthalten, aber es funktionierte nicht wie erwartet, als ich es in Chrome versuchte.

Das 50*(1-ratio)kommt von:

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)

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

Bearbeiten:

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

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

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

Ich habe dies durch Browser-Shots laufen lassen und es scheint in Ordnung zu sein; Wenn nicht anders, werde ich das Original unten aufbewahren, damit die prozentuale Behandlung der Margen gemäß der CSS-Spezifikation das Licht der Welt erblickt.

Original:

Sieht so aus, als wäre ich zu spät zur Party!

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

.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, und mit negativen Rändern wird der Inhalt auf magische Weise in der absoluten Mitte der Seite wieder angezeigt! http://jsfiddle.net/rJPPc/

Falsch! Die horizontale Positionierung ist in Ordnung, aber vertikal ... Oh, ich verstehe. Anscheinend wird in CSS beim Festlegen der oberen Ränder in% der Wert als Prozentsatz berechnet, der immer relativ zur Breite des enthaltenen Blocks ist . Wie Äpfel und Orangen! Wenn Sie mir oder Mozilla Doco nicht vertrauen, spielen Sie mit der obigen Geige, indem Sie die Inhaltsbreite anpassen, und lassen Sie sich überraschen.

Jetzt, da CSS mein Brot und Butter ist, wollte ich nicht aufgeben. Gleichzeitig bevorzuge ich einfache Dinge, deshalb habe ich mir die Erkenntnisse eines tschechischen CSS-Gurus geliehen und daraus eine funktionierende Geige gemacht. Kurz gesagt, wir erstellen eine Tabelle, in der die vertikale Ausrichtung auf Mitte eingestellt ist:

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

Und dann ist die Position des Inhalts mit einem guten alten Rand fein abgestimmt : 0 auto; ::

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

Arbeitsgeige wie versprochen: http://jsfiddle.net/teDQ2/

Was ich hier habe, ist eine "Center" -Methode, die sicherstellt, dass das Element, das Sie zentrieren möchten, nicht nur "fest" oder "absolut" positioniert ist, sondern auch sicherstellt, dass das Element, das Sie zentrieren, kleiner ist als das übergeordnete Element, dieses Center Wenn das übergeordnete Element kleiner als das Element selbst ist, wird das DOM auf das nächste übergeordnete Element geplündert 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');
        }
    };

ich benutze das:

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

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();

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

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

Hierfür ist keine Abfrage erforderlich

Ich habe dies verwendet, um das Div-Element zu zentrieren. CSS-Stil,

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

});

MEIN UPDATE ZU TONY L'S ANTWORT Dies ist die modifizierte Version seiner Antwort, die ich jetzt religiös verwende. Ich dachte, ich würde es teilen, da es etwas mehr Funktionalität für verschiedene Situationen hinzufügt, wie z. B. verschiedene Arten positionoder nur horizontale / vertikale Zentrierung anstelle von beiden.

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 funktioniert mit jedem Positionierungstyp und kann problemlos auf Ihrer gesamten Site sowie problemlos auf jede andere von Ihnen erstellte Site portiert werden. Keine lästigen Problemumgehungen mehr, um etwas richtig zu zentrieren.

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

Viele Möglichkeiten, dies zu tun. Mein Objekt wird mit der Anzeige ausgeblendet : Keine nur innerhalb des BODY-Tags, sodass die Positionierung relativ zum BODY ist. Nachdem ich $ ("# object_id"). Show () verwendet habe , rufe ich $ ("# object_id"). Center () auf.

Ich verwende position: absolute, da es insbesondere auf einem kleinen mobilen Gerät möglich ist, dass das modale Fenster größer als das Gerätefenster ist. In diesem Fall könnte ein Teil des modalen Inhalts nicht zugänglich sein, wenn die Positionierung festgelegt 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;
    };

Sie können die CSS- translateEigenschaft verwenden:

position: absolute;
transform: translate(-50%, -50%);

Lesen Sie diesen Beitrag für weitere Details.

Normalerweise würde ich dies nur mit CSS tun ... aber da Sie gefragt haben, wie Sie dies mit jQuery tun können ...

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 diese Geige )

CSS-Lösung Nur in zwei Zeilen

Es zentralisiert Ihr inneres Div horizontal und vertikal.

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

}}

für nur horizontale Ausrichtung ändern

margin: 0 auto;

und für vertikale ändern

margin: auto 0;

Sagen Sie einfach: $ ("# divID"). Html ($ (''). Html ($ ("# divID"). Html ()));

Warum verwenden Sie CSS nicht zum Zentrieren eines Divs?

#timer_wrap{  
  position: fixed;
  left: 50%;
  top: 50%;
}