Utiliser jQuery pour centrer une DIV sur l'écran
Comment puis-je configurer un <div> au centre de l'écran à l'aide de jQuery?
J'aime ajouter des fonctions à jQuery pour que cette fonction aide:
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é)
Je mets un jquery plugin 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 ?
METTRE À JOUR :
De CSS-Tricks
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); /* Yep! */
width: 48%;
height: 59%;
}
Je recommanderais Utilitaire de position jQueryUI
$('your-selector').position({
of: $(window)
});
ce qui vous donne bien plus de possibilités que le centrage ...
Voici mon coup d'oeil. J'ai fini par l'utiliser pour mon clone Lightbox. Le principal avantage de cette solution est que l'élément restera automatiquement centré 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;
}
Vous pouvez utiliser CSS seul pour centrer comme ceci:
.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 MDN pour calc()
Tableau de support du navigateur
Je développe la grande réponse donnée par @TonyL. J'ajoute Math.abs () pour envelopper les valeurs, et je considère également que jQuery pourrait être en mode "aucun conflit", comme par exemple dans WordPress.
Je vous recommande d'envelopper les valeurs top et left 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 zone de fermeture en haut, cela évitera le problème de ne pas voir la case de fermeture. La fonction de Tony aurait eu des valeurs potentiellement négatives. Si vous avez une boîte de dialogue centrée volumineuse alors que l’utilisateur final a installé plusieurs barres d’outils et/ou augmenté sa police par défaut, voici un bon exemple: en haut) peut ne pas être visible et cliquable.
L'autre chose que je fais est d'accélérer un peu ceci en mettant en cache l'objet $ (window) afin que je réduise les traversées de DOM supplémentaires et que j'utilise un cluster CSS.
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 l'utiliser, vous feriez quelque chose comme:
jQuery(document).ready(function($){
$('#myelem').center();
});
Je voudrais utiliser la fonction jQuery UIposition.
Voir la démonstration en cours.
<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 alors le script suivant centrerait le div dans la fenêtre sur le document prêt (les valeurs par défaut pour "my" et "at" dans les options de position sont "center")
<script type="text/javascript">
$(function(){
$("#test").position({
of: $(window)
});
};
</script>
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 que le contenu soit dynamique) et scrollTop() = 0, exemple:
window.height est 600this.height est 650
600 - 650 = -50
-50 / 2 = -25
Maintenant, la boîte est centrée -25 hors écran.
Je ne pense pas qu'il serait préférable d'avoir une position absolue 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. Cela s'appelle centre fixe .
Ceci n’a pas été testé, mais quelque chose comme cela devrait fonctionner.
var myElement = $('#myElement');
myElement.css({
position: 'absolute',
left: '50%',
'margin-left': 0 - (myElement.width() / 2)
});
Pour centrer l'élément par rapport à la fenêtre du navigateur, n'utilisez pas position: absolute, la valeur de position correcte doit être fixed (absolu signifie: "L'élément est positionné par rapport à son premier élément ancêtre (non statique)").
Cette version alternative du plugin center proposé utilise "%" au lieu de "px". Ainsi, lorsque vous redimensionnez la fenêtre, le contenu est maintenu au centre:
$.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: 0 pour exclure les marges du contenu de la largeur/hauteur (puisque nous utilisons une position fixe, avoir des marges n'a aucun sens). Selon la documentation jQuery, utiliser .outerWidth(true) devrait inclure les marges, mais cela n’a pas fonctionné comme prévu lorsque j’ai essayé avec Chrome.
La 50*(1-ratio) provient de:
Largeur de la fenêtre: W = 100%
Largeur d'élément (en%): w = 100 * elementWidthInPixels/windowWidthInPixels
Eux pour calculer la gauche centrée:
left = W/2 - w/2 = 50 - 50 * elementWidthInPixels/windowWidthInPixels =
= 50 * (1-elementWidthInPixels/windowWidthInPixels)
Le composant de transition de cette fonction fonctionnait très mal pour moi dans Chrome (n’a pas été testé ailleurs). Je redimensionnais un peu la fenêtre et mon élément se baladait lentement, essayant de rattraper son retard.
Donc, la fonction suivante commente cette partie. En outre, j’ai ajouté des paramètres permettant de passer des booléens x & y facultatifs, si vous souhaitez 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);
Modifier:
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) exacte de la manière dont cela a été traité le http://www.jakpsatweb.cz/css/css-vertical-center-solution.html - il est fortement piraté pendant IE mais fournit un moyen purement CSS 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;}
Fiddle: http://jsfiddle.net/S9upd/4/
J'ai parcouru cela dans les navigateurs et ça semble aller; si pour rien d'autre, je conserve l'original ci-dessous pour que le traitement du pourcentage de marge dicté par la spécification CSS soit annoncé.
Original:
On dirait que je suis en retard à la fête!
Certains commentaires ci-dessus suggèrent qu'il s'agit d'une question de CSS - séparation des problèmes et de tous les problèmes. Permettez-moi de commencer par dire que CSS vraiment s'est tiré une balle dans le pied. Je veux dire, comme cela serait facile de faire ceci:
.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 les marges négatives, le contenu réapparaîtrait comme par magie au centre absolu de la page! http://jsfiddle.net/rJPPc/
Faux! Le positionnement horizontal est correct, mais verticalement ... Oh, je vois. Apparemment, dans css, lors de la définition des marges supérieures en%, la valeur est calculée comme suit: un pourcentage toujours relatif au width du bloc conteneur }. Comme des pommes et des oranges! Si vous ne me faites pas confiance, ni à Mozilla Doco, jouez avec le violon précédent en ajustant la largeur du contenu et laissez-vous surprendre.
...
Maintenant, avec CSS étant mon pain et le beurre, je n'étais pas sur le point d'abandonner. En même temps, comme je préfère les choses faciles, j’ai emprunté les résultats d’un gourou du CSS tchèque pour en faire un violon fonctionnel. En bref, nous créons un tableau dans lequel vertical-align est défini 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 ajustée avec le bon vieux margin: 0 auto;:
.super-centered {position:absolute; width:100%;height:100%;vertical-align:middle;}
.content {margin:0 auto;width:200px;}
Travailler le violon comme promis: http://jsfiddle.net/teDQ2/
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
}
}
Ce que j’ai ici est une méthode "centre" qui assure que l’élément que vous essayez de centrer n’est pas seulement un positionnement "fixe" ou "absolu", mais qu’il garantit également que l’élément que vous centrez est plus petit que son parent, et élément relatif à est parent, si le parent d'éléments est plus petit que l'élément lui-même, il va piller le DOM jusqu'au prochain parent et le centrer par rapport à celui-ci.
$.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');
}
};
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();
j'utilise ceci:
$(function() {
$('#divId').css({
'left' : '50%',
'top' : '50%',
'position' : 'absolute',
'margin-left' : -$('#divId').outerWidth()/2,
'margin-top' : -$('#divId').outerHeight()/2
});
});
Normalement, je ne ferais cela qu'avec CSS ... mais puisque vous vous avez demandé comment faire cela 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 this Fiddle )
Solution CSS En deux lignes seulement
Il centralise votre div interne horizontalement et verticalement.
#outer{
display: flex;
}
#inner{
margin: auto;
}
pour seulement aligner horizontalement, changer
margin: 0 auto;
et pour vertical, changement
margin: auto 0;
Pas besoin de jquery pour ça
J'ai utilisé cela pour centrer l'élément Div . Css Style,
.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);
});
});
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");
});
};
MA MISE À JOUR DE TONY L'S REPONSE Voici la version modifiée de sa réponse que j'utilise religieusement maintenant. Je pensais que je le partagerais, car cela ajoute un peu plus de fonctionnalités à différentes situations, telles que différents types de position ou tout simplement 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 tout votre site, ainsi que facilement transférable vers tout autre site que vous créez. Finies les solutions de contournement ennuyeuses pour centrer correctement quelque chose.
J'espère que cela est utile pour quelqu'un! Prendre plaisir.
vous obtenez cette mauvaise transition car vous ajustez la position de l'élément à chaque défilement du document. Ce que vous voulez, c'est utiliser un positionnement fixe. J'ai essayé ce plugin de centre fixe répertorié ci-dessus et cela semble résoudre le problème correctement. 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 défilement.
Beaucoup de façons de le faire. Mon objet est gardé caché avec display: none juste à l'intérieur de la balise BODY afin que le positionnement soit relatif au BODY. Après avoir utilisé $ ("# object_id"). Show () , j’appelle $ ("# object_id"). Center ()
J'utilise position: absolute 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;
};