.modal { text-align: center; } @media screen and (min-width: 768px) { .modal:before { display: inline-block; vertical-align: middle; content: " "; height: 100%; } } .modal-dialog { display: inline-block; text-align: left; vertical-align: middle; } 

Et ajustez un peu la classe .fade pour vous assurer qu’elle apparaît en dehors de la bordure supérieure de la fenêtre, au lieu du centre

1. Comment positionner le modal verticalement au centre lorsque vous ne connaissez pas la hauteur exacte du modal?

Pour centrer de manière absolue le modal Bootstrap 3 sans déclarer de hauteur, vous devez d’abord remplacer le CSS Bootstrap en l’ajoutant à votre feuille de style:

 .modal-dialog-center { /* Edited classname 10/03/2014 */ margin: 0; position: absolute; top: 50%; left: 50%; } 

Cela positionnera le coin supérieur gauche de la boîte de dialog modale au centre de la fenêtre.

Nous devons append cette requête média ou bien la marge modale à gauche est incorrecte sur les petits appareils:

 @media (max-width: 767px) { .modal-dialog-center { /* Edited classname 10/03/2014 */ width: 100%; } } 

Maintenant, nous devrons ajuster sa position avec JavaScript. Pour ce faire, nous donnons à l’élément une marge supérieure et gauche négative égale à la moitié de sa hauteur et de sa largeur. Dans cet exemple, nous utiliserons jQuery car il est disponible avec Bootstrap.

 $('.modal').on('shown.bs.modal', function() { $(this).find('.modal-dialog').css({ 'margin-top': function () { return -($(this).outerHeight() / 2); }, 'margin-left': function () { return -($(this).outerWidth() / 2); } }); }); 

Mise à jour (01/10/2015):

Ajout de la réponse de Finik . Crédits à centrer dans l’inconnu .

 .modal { text-align: center; padding: 0!important; } .modal:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -4px; /* Adjusts for spacing */ } .modal-dialog { display: inline-block; text-align: left; vertical-align: middle; } 

Remarquez la marge négative-droite? Cela supprime l’espace ajouté par inline-block. Cet espace fait que le modal saute au bas de la page @media width <768px.

2. Est-il possible d’avoir le modal centré et d’avoir un débordement: auto dans le modal-corps, mais seulement si le modal dépasse la hauteur de l’écran?

Cela est possible en donnant au modal-body un overflow-y: auto et un max-height. Cela demande un peu plus de travail pour que cela fonctionne correctement. Commencez par append ceci à votre feuille de style:

 .modal-body { overflow-y: auto; } .modal-footer { margin-top: 0; } 

Nous utiliserons à nouveau jQuery pour obtenir la hauteur de la fenêtre et définirons d’abord la hauteur maximale du contenu modal. Ensuite, il faut définir la hauteur maximale du corps modal, en soustrayant le contenu modal avec l’en-tête modal et le modal-footer:

 $('.modal').on('shown.bs.modal', function() { var contentHeight = $(window).height() - 60; var headerHeight = $(this).find('.modal-header').outerHeight() || 2; var footerHeight = $(this).find('.modal-footer').outerHeight() || 2; $(this).find('.modal-content').css({ 'max-height': function () { return contentHeight; } }); $(this).find('.modal-body').css({ 'max-height': function () { return (contentHeight - (headerHeight + footerHeight)); } }); $(this).find('.modal-dialog').css({ 'margin-top': function () { return -($(this).outerHeight() / 2); }, 'margin-left': function () { return -($(this).outerWidth() / 2); } }); }); 

Vous pouvez trouver une démo qui fonctionne ici avec Bootstrap 3.0.3: http://cdpn.io/GwvrJ EDIT: Je recommande d’utiliser plutôt la version mise à jour pour une solution plus réactive: http://cdpn.io/mKfCc

Mise à jour (30/11/2015):

 function setModalMaxHeight(element) { this.$element = $(element); this.$content = this.$element.find('.modal-content'); var borderWidth = this.$content.outerHeight() - this.$content.innerHeight(); var dialogMargin = $(window).width() < 768 ? 20 : 60; var contentHeight = $(window).height() - (dialogMargin + borderWidth); var headerHeight = this.$element.find('.modal-header').outerHeight() || 0; var footerHeight = this.$element.find('.modal-footer').outerHeight() || 0; var maxHeight = contentHeight - (headerHeight + footerHeight); this.$content.css({ 'overflow': 'hidden' }); this.$element .find('.modal-body').css({ 'max-height': maxHeight, 'overflow-y': 'auto' }); } $('.modal').on('show.bs.modal', function() { $(this).show(); setModalMaxHeight(this); }); $(window).resize(function() { if ($('.modal.in').length != 0) { setModalMaxHeight($('.modal.in')); } }); 

(Mise à jour 30/11/2015 http://cdpn.io/mKfCc avec modifier ci-dessus)

Ma solution

 .modal-dialog-center { margin-top: 25%; } 
 
 
 
 × 
 
 
  
 
  
 
 
 
  

Il peut simplement être fixé avec l’ display: flex

 .modal-dialog { margin-top: 0; margin-bottom: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; } .modal.fade .modal-dialog { transform: translate(0, -100%); } .modal.in .modal-dialog { transform: translate(0, 0); } 

Avec préfixe

 .modal-dialog { margin-top: 0; margin-bottom: 0; height: 100vh; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .modal.fade .modal-dialog { -webkit-transform: translate(0, -100%); transform: translate(0, -100%); } .modal.in .modal-dialog { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 

Je suis venu avec une solution css pure! C’est css3 cependant, ce qui signifie que 8 ou moins n’est pas supporté, mais à part cela, il est testé et fonctionne sur ios, Android, ie9 +, chrome, firefox, safari de bureau ..

J’utilise le css suivant:

 .modal-dialog { position:absolute; top:50% !important; transform: translate(0, -50%) !important; -ms-transform: translate(0, -50%) !important; -webkit-transform: translate(0, -50%) !important; margin:auto 5%; width:90%; height:80%; } .modal-content { min-height:100%; position:absolute; top:0; bottom:0; left:0; right:0; } .modal-body { position:absolute; top:45px; /** height of header **/ bottom:45px; /** height of footer **/ left:0; right:0; overflow-y:auto; } .modal-footer { position:absolute; bottom:0; left:0; right:0; } 

Voici un violon http://codepen.io/anon/pen/Hiskj

..sélectionnant ceci comme la bonne réponse car il n’y a pas de javascript extra lourd qui met le navigateur à genoux dans le cas de plusieurs modaux.

Si vous préférez utiliser la flexbox, cela devrait vous aider à le résoudre.

 .modal-dialog { height: 100%; width: 100%; display: flex; align-items: center; } .modal-content { margin: 0 auto; } 

Tout ce que j’ai fait dans mon cas est de placer le Top dans mon css sachant la hauteur du modal

dans mon css j’ai mis

 #myModal{ height: 400px; top: calc(50% - 200px) !important; } 

En développant l’excellente réponse de @ Finik, cette correction ne s’applique qu’aux appareils non mobiles. J’ai testé dans IE8, Chrome et Firefox 22 – il fonctionne avec du contenu très long ou court.

 .modal { text-align: center; } @media screen and (min-device-width: 768px) { .modal:before { display: inline-block; vertical-align: middle; content: " "; height: 100%; } } .modal-dialog { display: inline-block; text-align: left; vertical-align: middle; } 

Ma solution:

 .modal.in .modal-dialog { -webkit-transform: translate(0, calc(50vh - 50%)); -ms-transform: translate(0, 50vh) translate(0, -50%); -o-transform: translate(0, calc(50vh - 50%)); transform: translate(0, 50vh) translate(0, -50%); } 

Il existe un moyen plus simple de le faire en utilisant css:

 .modal-dialog { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width:500px; height:300px; } 

C’est tout. Notez qu’il ne faut que l’appliquer au div de conteneur .modal-dialog .

Démo: https://jsfiddle.net/darioferrer/0ueu4dmy/

La solution la plus universelle que j’ai écrite. Dynamicaly calcule avec la hauteur de dialog. (La prochaine étape pourrait être de recalculer la hauteur des dialogs lors du redimensionnement de la fenêtre.)

JSfiddle: http://jsfiddle.net/8Fvg9/3/

 // initialise on document ready jQuery(document).ready(function ($) { 'use ssortingct'; // CENTERED MODALS // phase one - store every dialog's height $('.modal').each(function () { var t = $(this), d = t.find('.modal-dialog'), fadeClass = (t.is('.fade') ? 'fade' : ''); // render dialog t.removeClass('fade') .addClass('invisible') .css('display', 'block'); // read and store dialog height d.data('height', d.height()); // hide dialog again t.css('display', '') .removeClass('invisible') .addClass(fadeClass); }); // phase two - set margin-top on every dialog show $('.modal').on('show.bs.modal', function () { var t = $(this), d = t.find('.modal-dialog'), dh = d.data('height'), w = $(window).width(), h = $(window).height(); // if it is desktop & dialog is lower than viewport // (set your own values) if (w > 380 && (dh + 60) < h) { d.css('margin-top', Math.round(0.96 * (h - dh) / 2)); } else { d.css('margin-top', ''); } }); }); 

Trouvé la solution parfaite d’ ici

 $(function() { function reposition() { var modal = $(this), dialog = modal.find('.modal-dialog'); modal.css('display', 'block'); // Dividing by two centers the modal exactly, but dividing by three // or four works better for larger screens. dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2)); } // Reposition when a modal is shown $('.modal').on('show.bs.modal', reposition); // Reposition when the window is resized $(window).on('resize', function() { $('.modal:visible').each(reposition); }); }); 

 $('#myModal').on('shown.bs.modal', function() { var initModalHeight = $('#modal-dialog').outerHeight(); //give an id to .mobile-dialog var userScreenHeight = $(document).outerHeight(); if (initModalHeight > userScreenHeight) { $('#modal-dialog').css('overflow', 'auto'); //set to overflow if no fit } else { $('#modal-dialog').css('margin-top', (userScreenHeight / 2) - (initModalHeight/2)); //center it if it does fit } }); 

J’ai téléchargé bootstrap3-dialog à partir du lien ci-dessous et modifié la fonction open dans bootstrap-dialog.js

https://github.com/nakupanda/bootstrap3-dialog

Code

 open: function () { !this.isRealized() && this.realize(); this.updateClosable(); //Custom To Vertically centering Bootstrap var $mymodal = this.getModal(); $mymodal = $mymodal.append(''); $mymodal = $mymodal.find(".modal-dialog").appendTo($mymodal.find(".centerModal")); //END this.getModal().modal('show'); return this; } 

Css

 .centerModal .modal-header{ text-align:left; } .centerModal .modal-body{ text-align:left; } 

Voici une autre méthode css qui fonctionne plutôt bien et qui est basée sur ceci: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

toupet:

 .modal { height: 100%; .modal-dialog { top: 50% !important; margin-top:0; margin-bottom:0; } //keep proper transitions on fade in &.fade .modal-dialog { transform: translateY(-100%) !important; } &.in .modal-dialog { transform: translateY(-50%) !important; } } 

Essayez quelque chose comme ça:

 .popup__overlay { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 999; text-align: center } .popup { display: inline-block; vertical-align: middle } 

Vous pourriez vouloir vérifier cette collection de méthodes pour un centrage absolu d’une div: http://codepen.io/shshaw/full/gEiDt

Encore une autre solution qui définira une position valide pour chaque événement modal visible sur window.resize et sur show.bs.modal :

 (function ($) { "use ssortingct"; function centerModal() { $(this).css('display', 'block'); var $dialog = $(this).find(".modal-dialog"), offset = ($(window).height() - $dialog.height()) / 2, bottomMargin = parseInt($dialog.css('marginBottom'), 10); // Make sure you don't hide the top part of the modal w/ a negative margin if it's longer than the screen height, and keep the margin equal to the bottom margin of the modal if(offset < bottomMargin) offset = bottomMargin; $dialog.css("margin-top", offset); } $(document).on('show.bs.modal', '.modal', centerModal); $(window).on("resize", function () { $('.modal:visible').each(centerModal); }); })(jQuery); 

 var modalVerticalCenterClass = ".modal"; function centerModals($element) { var $modals; if ($element.length) { $modals = $element; } else { $modals = $(modalVerticalCenterClass + ':visible'); } $modals.each( function(i) { var $clone = $(this).clone().css('display', 'block').appendTo('body'); var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2); top = top > 0 ? top : 0; $clone.remove(); $(this).find('.modal-content').css("margin-top", top); }); } $(modalVerticalCenterClass).on('show.bs.modal', function(e) { centerModals($(this)); }); $(window).on('resize', centerModals); 

Je sais que c’est un peu tard, mais j’ajoute une nouvelle réponse pour que cela ne se perde pas dans la foule. C’est une solution de navigateur mobile qui fonctionne partout comme il se doit.

Il suffit que la modal-dialog de modal-dialog soit enveloppée dans une classe modal-dialog-wrap et que les ajouts de code suivants soient nécessaires:

 .modal-dialog-wrap { display: table; table-layout: fixed; width: 100%; height: 100%; } .modal-dialog { display: table-cell; vertical-align: middle; text-align: center; } .modal-content { display: inline-block; text-align: left; } 

Le dialog commence centré et dans les cas de contenu volumineux, il augmente simplement verticalement jusqu’à ce qu’une barre de défilement apparaisse.

Voici un violon de travail pour votre plaisir!

https://jsfiddle.net/v6u82mvu/1/

Cela fonctionne pour moi:

 .modal { text-align: center; padding: 0!important; } .modal:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -4px; } .modal-dialog { display: inline-block; text-align: left; vertical-align: middle; } 

Pensez à utiliser le plugin bootstrap-modal trouvé ici – https://github.com/jschr/bootstrap-modal

Le plugin centrera tous vos modaux

En ce qui concerne le centrage, je ne comprends pas les solutions trop compliquées. bootstrap le centre déjà horizontalement pour vous, vous n’avez donc pas besoin de jouer avec ça. Ma solution est juste de définir une marge supérieure uniquement en utilisant jQuery.

 $('#myModal').on('loaded.bs.modal', function() { $(this).find('.modal-dialog').css({ 'margin-top': function () { return (($(window).outerHeight() / 2) - ($(this).outerHeight() / 2)); } }); }); 

J’ai utilisé l’événement loaded.bs.modal comme je charge le contenu à distance, et l’utilisation de l’événement show.ba.modal entraîne un calcul de hauteur incorrect. Vous pouvez bien sûr append un événement pour la fenêtre en cours de redimensionnement si vous en avez besoin.

Un moyen très très simple pour atteindre ce concept et vous obtiendrez toujours modal dans le moddle de votre écran par CSS comme suit: http://jsfiddle.net/jy0zc2jc/1/

vous devez juste afficher la classe modal en tableau en suivant css:

 display:table 

et modal-dialog comme display:table-cell

voir exemple de travail complet dans violon donné

ce n’est pas si compliqué.

veuillez essayer ceci:

 $(document).ready(function(){ var modalId = "#myModal"; resize: function(){ var new_margin = Math.ceil(($(window).height() - $(modalId).find('.modal-dialog').height()) / 2); $(modalId).find('.modal-dialog').css('margin-top', new_margin + 'px'); } $(window).resize(function(){ resize(); }); $(modalId).on('shown.bs.modal', function(){ resize(); }); }); 

Un moyen simple Travaille pour moi. Thks rensdenobel 🙂 http://jsfiddle.net/rensdenobel/sRmLV/13/

   Launch demo modal  
 
 
 
 
 ×Close  
Modal title
 
 
...
 
 Close Save changes 
 
 
 
  

Utilisez ce script simple qui centre les modaux.

Si vous le souhaitez, vous pouvez définir une classe personnalisée (ex: .modal.modal-vcenter au lieu de .modal) pour limiter la fonctionnalité uniquement à certains modaux.

 var modalVerticalCenterClass = ".modal"; function centerModals($element) { var $modals; if ($element.length) { $modals = $element; } else { $modals = $(modalVerticalCenterClass + ':visible'); } $modals.each( function(i) { var $clone = $(this).clone().css('display', 'block').appendTo('body'); var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2); top = top > 0 ? top : 0; $clone.remove(); $(this).find('.modal-content').css("margin-top", top); }); } $(modalVerticalCenterClass).on('show.bs.modal', function(e) { centerModals($(this)); }); $(window).on('resize', centerModals); 

Ajoutez également ce correctif CSS pour l’espacement horizontal de la modale; nous montrons le parchemin sur les modaux, le corps défile automatiquement par Bootstrap:

 /* scroll fixes */ .modal-open .modal { padding-left: 0px !important; padding-right: 0px !important; overflow-y: scroll; } 

Dans la plateforme mobile, cela peut paraître un peu différent, voici mon code.

 
  
Basic Modal Example
 
Div for modal
 
 
 
 
 
确定要取消本次订单嘛？
 
 
 
 取消 确定 
 
 
 
 
  

Style de table

  
 
 
 
 
 
 × 
Modal title
 
 
 ... 
 
 Close Save changes