Verwenden von jQuery zum Zentrieren eines DIV auf dem Bildschirm

760

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

Craig
quelle
20
Dies ist eher eine CSS-Frage als eine jQuery-Frage. Sie können jQuery-Methoden verwenden, um die browserübergreifende Positionierung zu finden und die richtigen CSS-Stile auf ein Element anzuwenden. Der Kern der Frage besteht jedoch darin, wie ein Div mithilfe von CSS auf dem Bildschirm zentriert wird.
Chris MacDonald
Hier ist noch ein Plugin. alexandremagno.net/jquery/plugins/center
Ivailo Bardarov
2
Wenn Sie ein Div auf dem Bildschirm zentrieren, verwenden Sie möglicherweise die FIXED-Positionierung. Warum nicht einfach so: stackoverflow.com/questions/2005954/… . Die Lösung ist reines CSS, erfordert kein Javascript.
Ardee Aram
Stimmen Sie zu, die JavaScript-Methode ist überhaupt nicht so freundlich. Besonders browserübergreifend.
Simon Hayter

Antworten:

1070

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)

Tony L.
quelle
78
Eine Änderung, die ich vorschlagen würde: Sie sollten this.outerHeight () und this.outerWidth () anstelle von this.height () und this.width () verwenden. Wenn das Objekt einen Rand oder eine Auffüllung hat, wird es leicht außermittig.
Trevor Burnham
82
Warum ist dies kein nativer Teil der Funktionalität von jQuery?
Seth Carnegie
14
Was ist, wenn ich nicht im Containern zentrieren möchte, <div>anstatt <body>? Vielleicht sollten Sie ändern , windowum this.parent()einen Parameter für sie oder hinzufügen.
Derek 21 會 功夫
13
Der Code in der Antwort sollte "position: fixed" verwenden, da "absolute" vom ersten relativen übergeordneten Element berechnet wird und der Code das Fenster zur Berechnung des Zentrums verwendet.
Diego
2
Ich würde auch vorschlagen, Unterstützung hinzuzufügen, damit beim Ändern der Fenstergröße das Element auf der Seite angepasst wird. Derzeit bleibt es bei den ursprünglichen Abmessungen.
Webnet
143

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%;
}
Molokoloco
quelle
Ihre Funktion hat für ein vertikales Zentrum einwandfrei funktioniert. Es scheint nicht für eine horizontale Mitte zu funktionieren.
Halsafar
Das CSS setzt voraus, dass Sie die Größe (mindestens Prozentsätze) des zentrierten Div kennen, während die jQuery alles funktioniert.
Dunc
Meine Stimme ist CSS - viel einfacher und benötigt kein ausgefallenes Java-Skript. Wenn Sie fest statt absolut verwenden, bleibt es in der Mitte der Seite, auch wenn der Benutzer das Browserfenster scrollt
user1616338
60

Ich würde das Dienstprogramm jQueryUI Position empfehlen

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

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

cetnar
quelle
1
@ Timwi - Sind Sie sicher, dass Sie sich auf Fenster und Dokument konzentrieren?
Keithhackbarth
1
TypeError: $ (...). Position ist keine Funktion
Michelangelo
3
@Michelangelo: Sie benötigen die jqueryUI-Bibliothek, um .position () als Funktion verwenden zu können. Check out: api.jqueryui.com/position/
jake
Dieser Ausschnitt ist der beste: D. Aber seien Sie gewarnt, das Element muss "sichtbar" sein. '
Cԃ ա ԃ
39

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;
}
Juho Vepsäläinen
quelle
3
Ich denke, das funktioniert gut ... in meinem Fall ist es schief gegangen, weil ich ein responsives Design verwendet habe: Die Breite meines Div ändert sich, wenn sich die Bildschirmbreite ändert. Was perfekt funktioniert, ist die Antwort von Tony L und das Hinzufügen dieser: $(window).resize(function(){$('#mydiv').center()}); (mydiv ist ein modaler Dialog. Wenn es geschlossen ist, entferne ich den Resize Event Handler.)
Darren Cook
1
Manchmal möchten Sie möglicherweise Polsterung und Randbreite verwenden outerWidth()und outerHeight()berücksichtigen.
Philippe Gerber
Dies funktioniert perfekt für mich für Legacy-Projekte mit Dokumenttyp 5, bei denen $(window).height()0 angegeben ist. Ich habe jedoch die Position in "absolut" geändert.
Mykhaylo Adamovych
26

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

apaul
quelle
Beachten Sie, dass calc () in IE8 nicht unterstützt wird, wenn Sie diesen Browser mithilfe der jquery center-Strategie unterstützen müssen.
Mbokil
14

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();
});
Volomike
quelle
Ich mag deine Verbesserungen; Es gibt jedoch immer noch ein Problem, das ich gefunden habe, abhängig von dem genauen Verhalten, das Sie suchen. Die Bauchmuskeln funktionieren nur dann hervorragend, wenn der Benutzer vollständig nach oben und links gescrollt ist. Andernfalls muss der Benutzer das Browserfenster scrollen, um zur Titelleiste zu gelangen. Um dieses Problem zu lösen, habe ich mich für eine einfache if-Anweisung wie diese entschieden: if (top < w.scrollTop()) top = w.scrollTop();zusammen mit dem Äquivalent für left. Dies liefert wiederum ein anderes Verhalten, das wünschenswert sein kann oder nicht.
Alex Jorgenson
11

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>
andy_edward
quelle
8

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 .

John Butcher
quelle
6

Dies ist nicht getestet, aber so etwas sollte funktionieren.

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

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 .

Fred
quelle
4

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

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)
Diego
quelle
4

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
   }
}
Keith
quelle
4

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/

ov
quelle
1
Das Problem ist, dass nicht zentriert.
Konrad Borowski
@GlitchMr: Ich doppelte Kontrolle auf dem Arbeitsfeld morgen mag, aber die zweite Geige hat gut funktioniert auf Chrome / Safari Mac
ov
Richtig, ich habe Chrome, Firefox und Internet Explorer 8+ eingecheckt (IE7 funktioniert nicht) und es funktioniert. Aber es funktioniert nicht in Opera ... und das ist sehr seltsam, wenn man bedenkt, dass es sich um einfaches CSS handelt und in anderen Browsern funktioniert.
Konrad Borowski
@GlitchMr: Danke, dass du eine so alte Frage im Auge hast. Ich habe die Geige Link aktualisiert oben eine „richtige“ Antwort zeigen - lassen Sie mich wissen , ob es für Sie (oder Downvote in Vergessenheit arbeitet ich meine Chance gehabt haben :).!
ov
Heh, alles, was ich tun werde, ist kein Upvoting, es sei denn, die richtige Antwort wird angezeigt (derzeit funktioniert es in Opera immer noch nicht, aber ich denke, es ist ein Browser-Fehler) ... Oh, warte ... es funktioniert, wenn ich die Fenstergröße ändern werde und nicht ob ich die Größe von Windows in JSFiddle selbst ändern werde. Also funktioniert es :). Das tut mir leid. Trotzdem sollten Sie warnen, dass es in IE7 nicht funktioniert. +1. Oh, und ich denke, es funktioniert in IE6 ...
Konrad Borowski
3

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');
        }
    };
Ryan
quelle
2

ich benutze das:

$(function() {
   $('#divId').css({
    'left' : '50%',
    'top' : '50%',
    'position' : 'absolute',
    'margin-left' : -$('#divId').outerWidth()/2,
    'margin-top' : -$('#divId').outerHeight()/2
  });
});
gehalten
quelle
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();
Satya
quelle
0

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.

skaterdav85
quelle
0

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

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

});
Sajitha Rathnayake
quelle
Haben Sie vergessen, das HTML in Ihre Antwort aufzunehmen?
Ben
0

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.

Fata1Err0r
quelle
0

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;
    };
i_a
quelle
0

Sie können die CSS- translateEigenschaft verwenden:

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

Lesen Sie diesen Beitrag für weitere Details.

Fred K.
quelle
1
Für so etwas möchten Sie Ihre festlegen left: 50%und top: 50%dann können Sie die Transformationsübersetzung verwenden, um den Mittelpunkt korrekt zu verschieben. Bei dieser Methode verzerren / verwischen Browser wie Chrome Ihren Text anschließend, was normalerweise nicht wünschenswert ist. Es ist besser, die Breite / Höhe des Fensters zu erfassen und dann links / oben darauf zu positionieren, anstatt mit der Transformation herumzuspielen. Verhindert Verzerrungen und funktioniert in jedem Browser, in dem ich es getestet habe.
Fata1Err0r
0

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 )

John Slegers
quelle
0

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;
Shivam Chhetri
quelle
0

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

1.618
quelle
-6

Warum verwenden Sie CSS nicht zum Zentrieren eines Divs?

#timer_wrap{  
  position: fixed;
  left: 50%;
  top: 50%;
} 
ahmad balavipour
quelle
2
In Ihrem Beispiel befindet sich oben / links der Div dort, wo das Zentrum sein soll.
Cristi Mihai