Vertikales Zentrieren des Bootstrap-Modalfensters

Ich möchte mein Modal auf das Ansichtsfenster (Mitte) zentrieren. Ich habe versucht, einige CSS-Eigenschaften hinzuzufügen

 .modal { position: fixed; top:50%; left:50%; }   

Ich verwende dieses Beispiel http://jsfiddle.net/rniemeyer/Wjjnd/

Ich habe es versucht

$("#MyModal").modal('show').css(
    {
        'margin-top': function () {
            return -($(this).height() / 2);
        },
        'margin-left': function () {
            return -($(this).width() / 2);
        }
    })

Dies macht den Job: http://jsfiddle.net/sRmLV/1140/

Es verwendet ein Helfer-Div und einige benutzerdefinierte CSS. Kein Javascript oder jQuery erforderlich.

HTML (basierend auf dem Bootstrap- Demo-Code )

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="vertical-alignment-helper">
        <div class="modal-dialog vertical-align-center">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>

                    </button>
                     <h4 class="modal-title" id="myModalLabel">Modal title</h4>

                </div>
                <div class="modal-body">...</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events:none;
}
.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
}

Da die Antwort von gpcola bei mir nicht funktioniert hat, habe ich sie ein wenig bearbeitet, damit sie jetzt funktioniert. Ich habe "margin-top" anstelle von transform verwendet. Außerdem verwende ich das "show" -Ereignis anstelle des "showed" -Ereignisses, da es mir danach einen sehr schlechten Positionierungssprung verlieh (sichtbar, wenn Bootstrap-Animationen aktiviert sind). Stellen Sie sicher, dass die Anzeige vor dem Positionieren auf "Blockieren" eingestellt ist, da sonst $ dialog.height () 0 ist und das Modal nicht vollständig zentriert wird.

(function ($) {
    "use strict";
    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));

Das habe ich für meine App getan. Wenn Sie sich die folgenden Klassen in der Datei bootstrap.css ansehen, hat .modal-dialog eine Standardauffüllung von 10px und @media screen und (min-width: 768px) .modal-dialog hat eine obere Auffüllung von 30px. Daher habe ich in meiner benutzerdefinierten CSS-Datei meine obere Auffüllung für alle Bildschirme auf 15% festgelegt, ohne eine Medienbildschirmbreite anzugeben. Hoffe das hilft.

.modal-dialog {
  padding-top: 15%;
}

Der beste Weg, den ich für alle HTML5-Browser gefunden habe:

body.modal-open .modal {
    display: flex !important;
    height: 100%;
} 

body.modal-open .modal .modal-dialog {
    margin: auto;
}

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="table">
        <div class="table-cell">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        ...
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

// Stile

.table {
 display: table;
 height:100%;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}

Der Parameter top wird in .modal.fade.in überschrieben, um den in Ihrer benutzerdefinierten Deklaration festgelegten Wert zu erzwingen. Fügen Sie das !importantSchlüsselwort nach top hinzu. Dies zwingt den Browser, diesen Wert zu verwenden und alle anderen Werte für das Schlüsselwort zu ignorieren. Dies hat den Nachteil, dass Sie den Wert nirgendwo anders überschreiben können.

.modal {
    position: fixed;
    top: 50% !important;
    left: 50%;
}

Ab Bootstrap 4 wurde die folgende Klasse hinzugefügt, um dies für Sie ohne JavaScript zu erreichen.

modal-dialog-centered

Ihre Dokumentation finden Sie hier .

Vielen Dank an vd für den Hinweis, dass Sie beide .modal-dialog-zentriert zu .modal-dialog hinzufügen müssen, um das modal vertikal zu zentrieren.

das funktioniert bei mir perfekt:

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

Vollständige Demo- URL: https://codepen.io/dimbslmh/full/mKfCc

Sie können verwenden:

.modal {
    position: fixed;
    top: 50% !important;
    left: 50%;
    transform: translate(-50%, -50%);
}

um es sowohl vertikal als auch horizontal zu zentrieren.

Weil die meisten Antworten hier nicht oder nur teilweise funktionierten:

body.modal-open .modal[style]:not([style='display: none;']) {
    display: flex !important;
    height: 100%;
} 

body.modal-open .modal[style]:not([style='display: none;']) .modal-dialog {
    margin: auto;
}

Sie müssen den Selektor [Stil] verwenden, um den Stil nur auf das aktuell aktive Modal anzuwenden, anstatt auf alle Modalitäten. .inwäre toll gewesen, aber es scheint erst hinzugefügt zu werden, nachdem der Übergang abgeschlossen ist, was zu spät ist und für einige wirklich schlechte Übergänge sorgt. Glücklicherweise scheint Bootstrap immer ein Stilattribut auf das Modal anzuwenden, gerade als es zu zeigen beginnt, also ist dies ein bisschen hackig, aber es funktioniert.

Der :not([style='display: none;'])Teil ist eine Problemumgehung für den Bootstrap, bei dem das Stilattribut nicht korrekt entfernt und stattdessen die Stilanzeige beim Schließen des Dialogfelds auf "Keine" gesetzt wird.

Sie können das vertikale Ausrichtungszentrum auf dem Bootstrap 3-Modal folgendermaßen erreichen:

.modal-vertical-centered {
  transform: translate(0, 50%) !important;
  -ms-transform: translate(0, 50%) !important; /* IE 9 */
  -webkit-transform: translate(0, 50%) !important; /* Safari and Chrome */
}

und fügen Sie diese CSS-Klasse dem Container "Modal-Dialog" hinzu

<div class="modal-dialog modal-vertical-centered">
...

jsFiddle-Arbeitsbeispiel: http://jsfiddle.net/U4NRx/

Der sauberste und einfachste Weg, dies zu tun, ist die Verwendung von Flexbox! Das Folgende richtet ein Bootstrap 3-Modal vertikal in der Mitte des Bildschirms aus und ist so viel sauberer und einfacher als alle anderen hier veröffentlichten Lösungen:

body.modal-open .modal.in {
  display: flex !important;
  align-items: center;
}

HINWEIS: Dies ist zwar die einfachste Lösung, funktioniert jedoch aufgrund der Browserunterstützung möglicherweise nicht für alle Benutzer: http://caniuse.com/#feat=flexbox

Es sieht so aus, als ob (wie üblich) der IE hinterherhinkt. In meinem Fall sind alle Produkte, die ich für mich selbst oder für Kunden entwickle, IE10 +. (Aus geschäftlicher Sicht ist es nicht sinnvoll, Entwicklungszeit für die Unterstützung älterer IE-Versionen zu investieren, wenn damit das Produkt tatsächlich entwickelt und der MVP schneller veröffentlicht werden kann.) Dies ist sicherlich kein Luxus, den jeder hat.

Ich habe gesehen, dass größere Websites erkennen, ob Flexbox unterstützt wird oder nicht, und eine Klasse auf den Hauptteil der Seite anwenden. Diese Stufe des Front-End-Engineerings ist jedoch ziemlich robust, und Sie benötigen immer noch einen Fallback.

Ich würde die Menschen ermutigen, die Zukunft des Webs anzunehmen. Flexbox ist fantastisch und Sie sollten es verwenden, wenn Sie können.

PS - Diese Seite hat mir wirklich geholfen, die Flexbox als Ganzes zu erfassen und auf jeden Anwendungsfall anzuwenden: http://flexboxfroggy.com/

BEARBEITEN: Bei zwei Modalen auf einer Seite sollte dies für .modal.in gelten

Vorteile:

• Modale Inhalte sind auch dann zugänglich, wenn sie größer als das Gerät sind
• wird nicht verwendet display:table-cell(das ist nicht für Layouts gedacht)
• erfordert keine Änderungen am Standard-Bootstrap 3-Modal markup
• Positionierung ist reines CSS. Das JS wird hinzugefügt, um das Modal beim Klicken / Tippen darunter und darüber zu schließen
• Ich habe das nicht vorangestellte SCSSfür diejenigen eingefügt , die gulpoder verwendengrunt

// closes the modal on click/tap below/above the modal

$('.modal-dialog').on('click tap', function(e){
    if (e.target.classList.contains('modal-dialog')) {
    $('.modal').modal('hide');
  }
})

.modal-dialog {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow-y: auto;
  min-height: -webkit-calc(100vh - 60px);
  min-height: -moz-calc(100vh - 60px);
  min-height: calc(100vh - 60px);
}
@media (max-width: 767px) {
  .modal-dialog {
    min-height: -webkit-calc(100vh - 20px);
    min-height: -moz-calc(100vh - 20px);
    min-height: calc(100vh - 20px);
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Hinweis : Ich beabsichtige, diese Antwort mit den neuesten Spezifikationen von Bootstrap 3 auf dem neuesten Stand zu halten. Eine Bootstrap 4-Lösung finden Sie in dieser Antwort (im Moment sind sie mehr oder weniger gleich, aber mit der Zeit können sie abweichen). Wenn Sie einen Fehler oder ein Problem damit finden, lassen Sie es mich wissen und ich werde es aktualisieren. Vielen Dank.

Sauber, ohne Präfix SCSS(zur Verwendung mit gulp/ grunt):

.modal-dialog {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  min-height: calc(100vh - 60px);
  @media (max-width: 767px) {
    min-height: calc(100vh - 20px);
  }
}

Noch eine CSS-Lösung. Funktioniert nicht für Popups, die größer als das Ansichtsfenster sind.

.modal-dialog {
    position: absolute;
    right: 0;
    left: 0;
    margin-top: 0;
    margin-bottom: 0; 
}
.modal.fade .modal-dialog {
    transition: top 0.4s ease-out;
    transform: translate(0, -50%);
    top: 0;
}
.modal.in .modal-dialog {
    transform: translate(0, -50%);
    top: 50%;
}

In der .modal-dialogKlasse wird die Position auf absolut (von relativ) überschrieben und der Inhalt zentriertright:0, left: 0

Beim .modal.fade .modal-dialog , .modal.in .modal-dialogEinstellen der Übergangsanimation topanstatt beim Übersetzen.

margin-topVerschiebt das Popup bei kleinen Popups leicht unter die Mitte und bei langen Popups bleibt das Modal mit dem Header hängen. Dahermargin-top:0, margin-bottom:0

Muss weiter verfeinert werden.

Für diejenigen, die Angular-UI-Bootstrap verwenden, können die folgenden Klassen basierend auf den obigen Informationen hinzugefügt werden:

Hinweis: Es sind keine weiteren Änderungen erforderlich, und alle Modalitäten werden aufgelöst.

// The 3 below classes have been placed to make the modal vertically centered
.modal-open .modal{
    display:table !important;
    height: 100%;
    width: 100%;
    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}

.modal-dialog{
    display: table-cell;
    vertical-align: middle;
    pointer-events: none;
}

.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
}

Wir brauchen kein Javascript. Boostrap modal fügt .in class hinzu, wenn es angezeigt wird. Ändern Sie einfach diese Klassenkombination mit modalclassName.fade.in mit flex css und Sie sind fertig.

Fügen Sie dieses CSS hinzu, um Ihr Modal vertikal und horizontal zu zentrieren.

.modal.fade.in {
    display: flex !important;
    justify-content: center;
    align-items: center;
}
.modal.fade.in .modal-dialog {
    width: 100%;
}

Meine Wahl, nur ein wenig CSS: (funktioniert NICHT in IE8)

.modal.fade .modal-dialog {
    transform: translate(-50%, -80%);
}

.modal.in .modal-dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-top: 0px;
}

Sie können mit der ersten Regel spielen, um die Darstellung des Modals zu ändern.

Verwenden von: Bootstrap 3.3.4

Fügen Sie einfach das folgende CSS zu Ihrem vorhandenen hinzu. Es funktioniert gut für mich

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

Basierend auf Aranys Antwort , aber auch unter Berücksichtigung des Seitenlaufs.

(function($) {
    "use strict";
    function positionModals(e) {
        var $this = $(this).css('display', 'block'),
            $window = $(window),
            $dialog = $this.find('.modal-dialog'),
            offset = ($window.height() - $window.scrollTop() - $dialog.height()) / 2,
            marginBottom = parseInt($dialog.css('margin-bottom'), 10);

        $dialog.css('margin-top', offset < marginBottom ? marginBottom : offset);
    }

    $(document).on('show.bs.modal', '.modal', positionModals);

    $(window).on('resize', function(e) {
        $('.modal:visible').each(positionModals);
    });
}(jQuery));

Ich denke, dies ist eine etwas sauberere reine CSS-Lösung als die von Rens de Nobel. Dies verhindert auch nicht, dass der Dialog durch Klicken außerhalb des Dialogfelds geschlossen wird.

http://plnkr.co/edit/JCGVZQ?p=preview

Fügen Sie dem DIV-Container einfach eine CSS-Klasse mit der Klasse .modal-dialog hinzu, um eine höhere Spezifität als das Bootstraps-CSS zu erzielen, z. B. .centered.

HTML

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog centered modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Und machen Sie diesen .modal-dialog.centered Container fest und richtig positioniert.

CSS

.modal .modal-dialog.centered {
    position: fixed;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
}

Oder noch einfacher mit Flexbox.

CSS

.modal {
    display: flex;
    align-items: center;
    justify-content: center;
}

Dies funktioniert in BS3, nicht in v2 getestet. Es zentriert das Modal vertikal. Beachten Sie, dass es dort übergeht - wenn Sie möchten, dass es nur in der Position angezeigt wird, bearbeiten Sie die CSS- transitionEigenschaft für.modal-dialog

centerModal = function() {
    var $dialog = $(this).find(".modal-dialog"),
        offset = ($(window).height() - $dialog.height()) / 2;

    // Center modal vertically in window
    $dialog.css({
        'transform': 'translateY(' + offset + 'px) !important',
    });
};

$('.modal').on('shown.bs.modal', centerModal);
$(window).on("resize", function() {
    $('.modal').each(centerModal);
});

e(document).on('show.bs.modal', function () {
        if($winWidth < $(window).width()){
            $('body.modal-open,.navbar-fixed-top,.navbar-fixed-bottom').css('marginRight',$(window).width()-$winWidth)
        }
    });
    e(document).on('hidden.bs.modal', function () {
        $('body,.navbar-fixed-top,.navbar-fixed-bottom').css('marginRight',0)
    });

Dies nimmt Aranys Antwort und lässt es funktionieren, wenn das Modal größer als die Höhe des Bildschirms ist:

function centerModal() {
    $(this).css('display', 'block');
    var $dialog = $(this).find(".modal-dialog");
    var offset = ($(window).height() - $dialog.height()) / 2;
    //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
    var bottomMargin = $dialog.css('marginBottom');
    bottomMargin = parseInt(bottomMargin);
    if(offset < bottomMargin) offset = bottomMargin;
    $dialog.css("margin-top", offset);
}

$('.modal').on('show.bs.modal', centerModal);
$(window).on("resize", function () {
    $('.modal:visible').each(centerModal);
});

Um die vertikale Modalzentrierung zu bootstrap modal.js hinzuzufügen, habe ich dies am Ende der Modal.prototype.showFunktion hinzugefügt :

var $modalDialog = $('.modal-dialog'),
        modalHeight = $modalDialog.height(),
        browserHeight = window.innerHeight;

    $modalDialog.css({'margin-top' : modalHeight >= browserHeight ? 0 : (browserHeight - modalHeight)/2});

So stellen Sie das Dialogfeld "Modal" auf "Alle alle ausrichten".

/* Hinweis:

1. Auch wenn Sie keinen Selektor zuweisen müssen, werden alle Modalitäten aus dem Dokument gefunden und vertikal in der Mitte angezeigt

2.Um zu vermeiden, dass ein bestimmtes Modal in der Mitte liegt, können Sie Folgendes verwenden: Nicht die Auswahl im Klickereignis

* /

 $( "[data-toggle='modal']" ).click(function(){
     var d_tar = $(this).attr('data-target'); 
     $(d_tar).show();   
     var modal_he = $(d_tar).find('.modal-dialog .modal-content').height(); 
     var win_height = $(window).height();
     var marr = win_height - modal_he;
     $('.modal-dialog').css('margin-top',marr/2);
  });

Aus Mailand Pandya

Verwenden Sie dieses einfache Skript, das die Modalitäten zentriert.

Wenn Sie möchten, können Sie eine benutzerdefinierte Klasse festlegen (z. B. .modal.modal-vcenter anstelle von .modal), um die Funktionalität nur auf einige Modalitäten zu beschränken.

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

Fügen Sie diesen CSS-Fix auch für den horizontalen Abstand des Modals hinzu. Wir zeigen die Schriftrolle auf den Modalen, die Körperschriftrollen werden von Bootstrap automatisch ausgeblendet:

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

Eine weitere CSS-Antwort auf diese Frage ...
Diese Lösung verwendet CSS nur, um den gewünschten Effekt zu erzielen, während die Möglichkeit erhalten bleibt, das Modal durch Klicken außerhalb zu schließen. Außerdem können Sie maximale .modal-contentHöhe und Breite festlegen, damit Ihr Popup nicht über das Ansichtsfenster hinaus wächst. Ein Bildlauf wird automatisch angezeigt, wenn der Inhalt die modale Größe überschreitet.

Hinweis:
Der empfohlene Bootstrap .modal-dialog divsollte weggelassen werden, damit dies ordnungsgemäß funktioniert (scheint nichts zu beschädigen). Getestet in Chrome 51 und IE 11.

CSS-Code:

.modal {
   height: 100%;
   width: 100%;
}

.modal-content {
   margin: 0 auto;
   max-height: 600px;
   max-width: 50%;
   overflow: auto;
   transform: translateY(-50%);
}

BEARBEITEN: In der .modal-dialogKlasse können Sie auswählen, ob ein Benutzer das Modal schließen kann, indem Sie außerhalb des Modals selbst klicken. Die meisten Modalitäten haben eine explizite Schaltfläche "Schließen" oder "Abbrechen". Beachten Sie dies, wenn Sie diese Problemumgehung verwenden.

Die beste Lösung, um Ihr Modal mit Breite und Höhe zu zentralisieren, ist, in css add und in modal diese 'Zentralisierung' als Klasse hinzuzufügen.

.centralize{
   position:absolute;
   left:50%;
   top:50%;

   background-color:#fff;
   transform: translate(-50%, -50%);
   width: 40%; //specify watever u want
   height: 50%;
   }

Vertikal zentriert Fügen Sie .modal-dialogzentriert zu .modal-dialog hinzu, um das Modal vertikal zu zentrieren

Starten Sie das Demo-Modal

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>