Utiliser jQuery pour centrer un DIV sur l'écran

760

Comment dois-je procéder pour définir un <div>au centre de l'écran à l'aide de jQuery?

Craig
la source
20
Il s'agit plus d'une question CSS que d'une question jQuery. Vous pouvez utiliser les méthodes jQuery pour vous aider à trouver le positionnement entre les navigateurs et pour appliquer les styles CSS appropriés à un élément, mais l'essence de la question est de savoir comment centrer un div sur l'écran à l'aide de CSS.
Chris MacDonald
Voici un autre plugin. alexandremagno.net/jquery/plugins/center
Ivailo Bardarov
2
Si vous centrez un div sur l'écran, vous utilisez peut-être le positionnement FIXE. Pourquoi ne pas simplement le faire: stackoverflow.com/questions/2005954/… . La solution est purement CSS, ne nécessite pas de javascript.
Ardee Aram du
D'accord, la méthode JavaScript n'est pas du tout conviviale. Particulièrement cross browser.
Simon Hayter

Réponses:

1070

J'aime ajouter des fonctions à jQuery donc cette fonction aiderait:

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

Maintenant, nous pouvons simplement écrire:

$(element).center();

Démo: Fiddle (avec paramètre ajouté)

Tony L.
la source
78
Une modification que je suggérerais: vous devriez utiliser this.outerHeight () et this.outerWidth () au lieu de simplement this.height () et this.width (). Sinon, si l'objet a une bordure ou un rembourrage, il finira légèrement décentré.
Trevor Burnham
82
Pourquoi n'est-ce pas une partie native de la fonctionnalité de jQuery?
Seth Carnegie
14
Et si je ne veux pas centrer dans le contenant <div>au lieu de <body>? Peut - être que vous devriez changer windowpour this.parent()ou ajouter un paramètre pour elle.
Derek 朕 會 功夫
13
Le code dans la réponse doit utiliser "position: fixed" car "absolu" est calculé à partir du premier parent relatif, et le code utilise une fenêtre pour calculer le centre.
Diego
2
Je suggère également d'ajouter un support pour que lorsque la fenêtre est redimensionnée, elle ajuste l'élément sur la page. Actuellement, il reste avec les dimensions d'origine.
Webnet
143

Je mets un plugin jquery ici

VERSION TRÈS COURTE

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

VERSION COURTE

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

Activé par ce code:

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

VERSION PLUGIN

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

Activé par ce code:

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

Est-ce correct ?

MISE À JOUR :

De CSS-Tricks

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* Yep! */
  width: 48%;
  height: 59%;
}
molokoloco
la source
Votre fonction a parfaitement fonctionné pour un centre vertical. Il ne semble pas fonctionner pour un centre horizontal.
Halsafar
Le CSS suppose que vous connaissez la taille (pourcentages au moins) du div centré, tandis que le jQuery fonctionne peu importe.
Dunc
Mon vote est CSS - beaucoup plus simple et n'a pas besoin de script Java sophistiqué. Si vous utilisez fixe au lieu d'absolu, il restera au centre de la page même lorsque l'utilisateur fait défiler la fenêtre du navigateur
user1616338
60

Je recommanderais l' utilitaire jQueryUI Position

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

ce qui vous donne beaucoup plus de possibilités que le simple centrage ...

cetnar
la source
1
@Timwi - Êtes-vous sûr de vous concentrer sur la fenêtre par rapport au document?
keithhackbarth
1
TypeError: $ (...). Position n'est pas une fonction
Michelangelo
3
@Michelangelo: Vous avez besoin de la bibliothèque jqueryUI pour utiliser .position () comme fonction. Départ: api.jqueryui.com/position/
jake
Cet extrait est le meilleur: D. Mais attention, l'élément doit être "visible". '
Cԃ ա ԃ
39

Voici mon coup. J'ai fini par l'utiliser pour mon clone Lightbox. Le principal avantage de cette solution est que l'élément restera centré automatiquement même si la fenêtre est redimensionnée, ce qui le rend idéal pour ce type d'utilisation.

$.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
la source
3
Je pense que cela fonctionne bien ... cela s'est mal passé dans mon cas en raison de l'utilisation d'un design réactif: la largeur de ma div change en fonction de la largeur de l'écran. Ce qui fonctionne parfaitement, c'est la réponse de Tony L, puis l'ajout de ceci: $(window).resize(function(){$('#mydiv').center()}); (mydiv est une boîte de dialogue modale, donc quand il est fermé, je supprime le gestionnaire d'événement de redimensionnement.)
Darren Cook
1
Parfois, vous voudrez peut-être utiliser outerWidth()et outerHeight()considérer le rembourrage et la largeur de la bordure.
Philippe Gerber
Cela fonctionne parfaitement pour moi pour un projet hérité avec un doc de type 5 où $(window).height()donne 0. Mais j'ai changé de position en «absolu».
Mykhaylo Adamovych
26

Vous pouvez utiliser CSS seul pour centrer comme ceci:

Exemple de travail

.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() vous permet de faire des calculs de base en css.

Documentation de MDN pour le calc()
tableau de prise en charge du navigateur

apaul
la source
Gardez à l'esprit que calc () n'est pas pris en charge dans IE8 si vous devez prendre en charge que le navigateur utilise la stratégie du centre jquery.
mbokil
14

Je développe la grande réponse donnée par @TonyL. J'ajoute Math.abs () pour encapsuler les valeurs, et je prends également en compte que jQuery peut être en mode "sans conflit", comme par exemple dans WordPress.

Je vous recommande d'envelopper les valeurs supérieures et gauches avec Math.abs () comme je l'ai fait ci-dessous. Si la fenêtre est trop petite et que votre boîte de dialogue modale a une boîte de fermeture en haut, cela évitera le problème de ne pas voir la boîte de fermeture. La fonction de Tony aurait eu des valeurs potentiellement négatives. Un bon exemple sur la façon dont vous vous retrouvez avec des valeurs négatives est si vous avez une grande boîte de dialogue centrée mais que l'utilisateur final a installé plusieurs barres d'outils et / ou augmenté sa police par défaut - dans ce cas, la case de fermeture d'une boîte de dialogue modale (si en haut) peut ne pas être visible et cliquable.

L'autre chose que je fais est d'accélérer un peu cela en mettant en cache l'objet $ (window) afin de réduire les traversées DOM supplémentaires et d'utiliser un CSS de cluster.

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

Pour utiliser, vous feriez quelque chose comme:

jQuery(document).ready(function($){
  $('#myelem').center();
});
Volomike
la source
J'aime vos améliorations; cependant, il y a encore un problème que j'ai trouvé en fonction du comportement exact que vous recherchez. Les abdominaux ne fonctionneront très bien que si l'utilisateur est entièrement défilé vers le haut et la gauche, sinon l'utilisateur devra faire défiler la fenêtre du navigateur pour accéder à la barre de titre. Pour résoudre ce problème, j'ai choisi de faire une simple instruction if comme celle-ci: if (top < w.scrollTop()) top = w.scrollTop();avec l'équivalent de left. Encore une fois, cela fournit un comportement différent qui peut être souhaitable ou non.
Alex Jorgenson
11

J'utiliserais la fonction jQuery UI position .

Voir la démonstration de travail .

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

Si j'ai un div avec id "test" à centrer, le script suivant centrera le div dans la fenêtre sur le document prêt. (les valeurs par défaut pour "mon" et "à" dans les options de position sont "centre")

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

Je voudrais corriger un problème.

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

Le code ci-dessus ne fonctionnera pas dans les cas où this.height(supposons que l'utilisateur redimensionne l'écran et le contenu est dynamique) et scrollTop() = 0, par exemple:

window.heightest 600
this.heightest650

600 - 650 = -50  

-50 / 2 = -25

Maintenant, la boîte est centrée -25hors écran.

John Butcher
la source
6

Ce n'est pas testé, mais quelque chose comme ça devrait fonctionner.

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

Je ne pense pas qu'avoir une position absolue serait mieux si vous voulez un élément toujours centré au milieu de la page. Vous voulez probablement un élément fixe. J'ai trouvé un autre plugin de centrage jquery qui utilisait un positionnement fixe. Il est appelé centre fixe .

Fred
la source
4

Le composant de transition de cette fonction a vraiment mal fonctionné pour moi dans Chrome (n'a pas testé ailleurs). Je redimensionnais la fenêtre un tas et mon élément se baladait lentement, essayant de rattraper son retard.

Ainsi, la fonction suivante commente cette partie. De plus, j'ai ajouté des paramètres pour passer des booléens x & y facultatifs, si vous voulez centrer verticalement mais pas horizontalement, par exemple:

// 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
la source
4

Pour centrer l'élément par rapport à la fenêtre du navigateur (fenêtre), ne pas utiliser position: absolute, la valeur de position correcte doit être fixed(signifie en absolu: "L'élément est positionné par rapport à son premier élément ancêtre positionné (non statique)").

Cette version alternative du plugin central proposé utilise "%" au lieu de "px", donc lorsque vous redimensionnez la fenêtre, le contenu reste centré:

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

Vous devez mettre margin: 0pour exclure les marges de contenu de la largeur / hauteur (puisque nous utilisons une position fixe, avoir des marges n'a aucun sens). Selon le doc jQuery utilisant.outerWidth(true) devrait inclure des marges, mais cela n'a pas fonctionné comme prévu lorsque j'ai essayé dans Chrome.

Le 50*(1-ratio)vient de:

Largeur de la fenêtre: W = 100%

Largeur de l'élément (en%): w = 100 * elementWidthInPixels/windowWidthInPixels

Eux pour calculer le centre gauche:

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

C'est bien. J'ai ajouté une fonction de rappel

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
la source
4

Éditer:

Si la question m'a appris quelque chose, c'est ceci: ne changez pas quelque chose qui fonctionne déjà :)

Je fournis une copie (presque) textuelle de la façon dont cela a été géré sur http://www.jakpsatweb.cz/css/css-vertical-center-solution.html - il est fortement piraté pour IE mais fournit un moyen CSS pur de répondre à la question:

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

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

J'ai exécuté cela par le biais de navigateurs et cela semble bien; si pour rien d'autre, je garderai l'original ci-dessous afin que le traitement du pourcentage de marge tel que dicté par les spécifications CSS voit le jour.

Original:

On dirait que je suis en retard à la fête!

Il y a quelques commentaires ci-dessus qui suggèrent qu'il s'agit d'une question CSS - séparation des préoccupations et tout. Permettez-moi de préfacer cela en disant que CSS s'est vraiment tiré une balle dans le pied sur celui-ci. Je veux dire, comment serait-il facile de le faire:

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

Droite? Le coin supérieur gauche du conteneur serait au centre de l'écran, et avec des marges négatives, le contenu réapparaîtra comme par magie au centre absolu de la page! http://jsfiddle.net/rJPPc/

Faux! Le positionnement horizontal est OK, mais verticalement ... Oh, je vois. Apparemment en CSS, lors de la définition des marges supérieures en%, la valeur est calculée en pourcentage toujours par rapport à la largeur du bloc conteneur . Comme des pommes et des oranges! Si vous n'avez pas confiance en moi ou en doco Mozilla, jouez avec le violon ci-dessus en ajustant la largeur du contenu et soyez étonné.


Maintenant, avec CSS étant mon pain et mon beurre, je n'allais pas abandonner. Dans le même temps, je préfère les choses faciles, j'ai donc emprunté les conclusions d'un gourou tchèque CSS et en ai fait un violon fonctionnel. Pour faire court, nous créons un tableau dans lequel l'alignement vertical est réglé au milieu:

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

Et que la position du contenu est affinée avec une bonne vieille marge: 0 auto; :

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

Violon de travail comme promis: http://jsfiddle.net/teDQ2/

ov
la source
1
Le problème est que ce n'est pas centré.
Konrad Borowski
@GlitchMr: Je voudrais vérifier sur la boîte de travail de demain, mais le second violon a bien fonctionné sur Chrome / Safari Mac
ov
À droite, j'ai vérifié dans Chrome, Firefox et Internet Explorer 8+ (IE7 ne fonctionne pas) et cela fonctionne. Mais cela ne fonctionne pas dans Opera ... et c'est très bizarre compte tenu de sa simplicité CSS et cela fonctionne dans d'autres navigateurs.
Konrad Borowski
@GlitchMr: merci d'avoir gardé un œil sur une question aussi ancienne. J'ai mis à jour le lien ci - dessus pour violon montrer une « bonne » réponse - laissez - moi savoir si cela fonctionne pour vous (ou downvote dans l' oubli que j'ai eu ma chance :).!
ov
Hé, tout ce que je vais faire, c'est de ne pas voter, à moins que la bonne réponse ne s'affiche (actuellement, cela ne fonctionne toujours pas dans Opera, mais je pense que c'est un bug de navigateur) ... oh attendez ... cela fonctionne si je redimensionne la fenêtre et non si je vais redimensionner les fenêtres dans JSFiddle lui-même. Donc ça marche :). Je suis désolé pour cela. Mais encore, vous devriez mettre en garde qu'il ne fonctionne pas dans IE7. +1. Oh, et je pense que cela fonctionne dans IE6 ...
Konrad Borowski
3

Ce que j'ai ici est une méthode "centrée" qui garantit que l'élément que vous essayez de centrer est non seulement de positionnement "fixe" ou "absolu", mais il garantit également que l'élément que vous centrez est plus petit que son parent, ce centre et l'élément par rapport à est parent, si le parent des éléments est plus petit que l'élément lui-même, il pillera le DOM vers le parent suivant et le centrera par rapport à cela.

$.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
la source
2

j'utilise ceci:

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

Veuillez utiliser ceci:

$(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
la source
0

vous obtenez cette mauvaise transition parce que vous ajustez la position de l'élément à chaque fois que le document défile. Ce que vous voulez, c'est utiliser un positionnement fixe. J'ai essayé le plugin central fixe répertorié ci-dessus et cela semble bien résoudre le problème. Le positionnement fixe vous permet de centrer un élément une fois, et la propriété CSS se chargera de maintenir cette position pour vous chaque fois que vous faites défiler.

skaterdav85
la source
0

Voici ma version. Je peux le changer après avoir regardé ces exemples.

$.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
la source
0

Pas besoin de jquery pour ça

Je l'ai utilisé pour centrer l'élément Div. Style CSS,

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

Élément ouvert

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

});
Sajitha Rathnayake
la source
Avez-vous oublié d'inclure le code html dans votre réponse?
Ben
0

MA MISE À JOUR DE LA RÉPONSE DE TONY L'S Ceci est la version modifiée de sa réponse que j'utilise religieusement maintenant. Je pensais que je le partagerais, car il ajoute un peu plus de fonctionnalités à diverses situations que vous pourriez avoir, telles que différents types deposition ou souhaitant uniquement un centrage horizontal / vertical plutôt que les deux.

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

Dans mon <head>:

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

Exemples d'utilisation:

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

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

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

Il fonctionne avec n'importe quel type de positionnement et peut être utilisé facilement sur l'ensemble de votre site, ainsi que facilement portable sur tout autre site que vous créez. Plus de contournements ennuyeux pour centrer quelque chose correctement.

J'espère que cela sera utile pour quelqu'un là-bas! Prendre plaisir.

Fata1Err0r
la source
0

Beaucoup de façons de le faire. Mon objet est gardé caché avec affichage: aucun juste à l'intérieur de la balise BODY de sorte que le positionnement est relatif au BODY. Après avoir utilisé $ ("# object_id"). Show () , j'appelle $ ("# object_id"). Center ()

J'utilise la position: absolue car il est possible, en particulier sur un petit appareil mobile, que la fenêtre modale soit plus grande que la fenêtre de l'appareil, auquel cas une partie du contenu modal pourrait être inaccessible si le positionnement était fixe.

Voici ma saveur basée sur les réponses des autres et mes besoins spécifiques:

$.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
la source
0

Vous pouvez utiliser la translatepropriété CSS :

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

Lisez cet article pour plus de détails.

Fred K
la source
1
Pour quelque chose comme ça, vous voudrez définir votre left: 50%, top: 50%puis vous pouvez utiliser la transformation transformer pour déplacer correctement son point central. Cependant, avec cette méthode, des navigateurs tels que Chrome déforment / brouillent votre texte par la suite, ce qui n'est généralement pas souhaitable. Il est préférable de saisir la largeur / hauteur de la fenêtre, puis de positionner la gauche / le haut en fonction de cela au lieu de jouer avec la transformation. Empêche la distorsion et fonctionne sur tous les navigateurs sur lesquels je l'ai testé.
Fata1Err0r
0

Normalement, je le ferais uniquement avec CSS ... mais puisque vous vous avez demandé un moyen de le faire avec jQuery ...

Le code suivant centre un div horizontalement et verticalement à l'intérieur de son conteneur:

$("#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>

(voir aussi ce violon )

John Slegers
la source
0

Solution CSS En deux lignes seulement

Il centralise votre div intérieure horizontalement et verticalement.

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

}

pour l'alignement horizontal uniquement, changez

margin: 0 auto;

et pour vertical, changer

margin: auto 0;
Shivam Chhetri
la source
0

Dites simplement: $ ("# divID"). Html ($ (''). Html ($ ("# divID"). Html ()));

1,618
la source
-6

Pourquoi vous n'utilisez pas CSS pour centrer un div?

#timer_wrap{  
  position: fixed;
  left: 50%;
  top: 50%;
} 
ahmad balavipour
la source
2
Dans votre exemple, le haut / gauche de la div sera là où le centre est censé être.
Cristi Mihai