Comment faire pour centrer modal vers le centre de l'écran?

Comment faire pour centrer modal vers le centre de l'écran?
C'est mon code html et le code js
Il fonctionne dans Chrome console, mais lorsque j'actualise cette page - cela ne fonctionne pas

$('.modal').css('top', $(window).outerHeight() / 2 - ($(".modal-dialog").outerHeight()) / 2 + 'px');
Êtes-vous à l'aide de Bootstrap ? Si oui, cochez cette réponse
Voir: stackoverflow.com/a/53373717/7186739

OriginalL'auteur Vlad Udod | 2016-09-21

  1. 6

    Moyen facile de résoudre

    .center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

    OriginalL'auteur Vlad Udod

  2. 2

    Essayez comme ceci

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

    si vous préférez jquery moyens essayer cette 

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

    OriginalL'auteur saravanajd

  3. 0

    Essayez quelque chose comme:

    $('.modal').css('margin-top', (Math.floor((window.innerHeight - $('.modal')[0].offsetHeight) / 2) + 'px');

    OriginalL'auteur Jim