Mit jQuery ein DIV auf dem Bildschirm zentrieren

Question

Mit jQuery ein DIV auf dem Bildschirm zentrieren

Gefragt el 17 de Oktober, 2008: Wann wurde die Frage gestellt
530589 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

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

Gefragt el 17 de Oktober, 2008 von Craig

21 Stimmen

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, aber der Kern der Frage ist, wie man ein div auf dem Bildschirm mit CSS zentriert.

Kommentiert el 17 de Oktober, 2008 von Chris MacDonald

0 Stimmen

Hier ist ein weiteres Plugin. alexandremagno.net/jquery/plugins/center

Kommentiert el 1 de Februar, 2011 von Ivailo Bardarov

2 Stimmen

Wenn Sie ein Div auf dem Bildschirm zentrieren, verwenden Sie möglicherweise eine FIXED-Positionierung. Warum nicht einfach dies tun: stackoverflow.com/questions/2005954/ . Die Lösung ist rein CSS, erfordert kein Javascript.

Kommentiert el 14 de April, 2011 von Ardee Aram

Anzeigen 1 weitere Kommentare

Answer 1

5 Antworten

Answer 2

3voto

Shivam Chhetri Punkte 626

CSS-Lösung Nur in zwei Zeilen

Es zentralisiert Ihr inneres Div horizontal und vertikal.

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

nur für die horizontale Ausrichtung, ändern Sie

margin: 0 auto;

und für die Vertikale, ändern Sie

margin: auto 0;

Beantwortet el 15 de Marsch, 2018 von Shivam Chhetri (626 Punkte )

Answer 3

2voto

satya Punkte 1085

Bitte benutzen Sie dies:

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

Beantwortet el 19 de Marsch, 2016 von satya (1085 Punkte )

Answer 4

2voto

holden Punkte 1615

Ich benutze das hier:

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

Beantwortet el 1 de November, 2015 von holden (1615 Punkte )

Answer 5

0voto

Fata1Err0r Punkte 736

MEIN UPDATE ZUR ANTWORT VON TONY L. Dies ist die geänderte Version seiner Antwort, die ich jetzt regelmäßig verwende. Ich dachte, ich würde sie mit Ihnen teilen, da sie etwas mehr Funktionalität für verschiedene Situationen bietet, wie zum Beispiel verschiedene Arten von position oder nur eine horizontale/vertikale Zentrierung und nicht beides wünschen.

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>

Beispiele für die Verwendung:

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

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

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

Es funktioniert mit jeder Art von Positionierung und kann auf Ihrer gesamten Website verwendet werden, aber auch leicht auf jede andere Website übertragen werden, die Sie erstellen. Keine lästigen Workarounds mehr, um etwas richtig zu zentrieren.

Ich hoffe, dies ist für jemanden da draußen nützlich! Viel Spaß!

Beantwortet el 23 de Juli, 2015 von Fata1Err0r (736 Punkte )

Answer 6

0voto

aji stack Punkte 35

Damit habe ich den UL in die mittlere Position gebracht.

cadasWidth          = $('.card-dashboard').innerWidth();
cadasWidthCenter    = cadasWidth/2;

ulmenuWidth         = $('.card-dashboard ul#menu').outerWidth();
ulmenuWidthCenter   = ulmenuWidth/2;

ulmenuStart = cadasWidthCenter - ulmenuWidthCenter;

$('.card-dashboard ul#menu').css({
    'left' : ulmenuStart,
    'position' : 'relative'
});

Beantwortet el 28 de Juli, 2022 von aji stack (35 Punkte )

Mit jQuery ein DIV auf dem Bildschirm zentrieren

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Mit jQuery ein DIV auf dem Bildschirm zentrieren

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: