Cửa sổ phương thức Bootstrap định tâm theo chiều dọc

Tôi muốn tập trung phương thức của mình vào chế độ xem (giữa) Tôi đã cố gắng thêm một số thuộc tính css

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

Tôi đang sử dụng ví dụ này http://jsfiddle.net/rniemeyer/Wjjnd/

Tôi đã thử

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

Điều này thực hiện công việc: http://jsfiddle.net/sRmLV/1140/

Nó sử dụng một helper-div và một số css tùy chỉnh. Không yêu cầu javascript hoặc jQuery.

HTML (dựa trên mã demo của Bootstrap )

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

Bởi vì câu trả lời của gpcola không hiệu quả với tôi, tôi đã chỉnh sửa một chút để nó hoạt động ngay bây giờ. Tôi đã sử dụng "lề trên" thay vì chuyển đổi. Ngoài ra, tôi sử dụng sự kiện "hiển thị" thay vì "hiển thị" bởi vì sau đó nó đã cho tôi một bước nhảy rất tệ về định vị (hiển thị khi bạn bật hoạt hình bootstrap). Đảm bảo đặt màn hình thành "chặn" trước khi định vị, nếu không, hộp thoại $.height () sẽ là 0 và phương thức sẽ không được căn giữa hoàn toàn.

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

Đây là những gì tôi đã làm cho ứng dụng của tôi. Nếu bạn xem các lớp sau trong tệp bootstrap.css .modal-hộp thoại có phần đệm mặc định là màn hình 10px và @media và (min-width: 768px) .modal-hộp thoại có phần đệm trên cùng được đặt thành 30px. Vì vậy, trong tệp css tùy chỉnh của mình, tôi đặt phần đệm trên cùng của mình là 15% cho tất cả các màn hình mà không chỉ định chiều rộng màn hình phương tiện. Hi vọng điêu nay co ich.

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

Cách tốt nhất tôi tìm thấy cho tất cả các trình duyệt HTML5:

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>

// Kiểu

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

Tham số hàng đầu đang được ghi đè trong .modal.fade.in để buộc giá trị được đặt trong khai báo tùy chỉnh của bạn, thêm !importanttừ khóa sau đầu trang. Điều này buộc trình duyệt sử dụng giá trị đó và bỏ qua mọi giá trị khác cho từ khóa. Điều này có nhược điểm là bạn không thể ghi đè giá trị ở bất kỳ nơi nào khác.

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

Kể từ Bootstrap 4, lớp sau đã được thêm vào để đạt được điều này cho bạn mà không cần JavaScript.

modal-dialog-centered

Bạn có thể tìm thấy tài liệu của họ ở đây .

Cảm ơn vd đã chỉ ra bạn cần thêm cả hai .modal-hộp thoại làm trung tâm vào .modal-hộp thoại để căn giữa theo chiều dọc của phương thức.

Điều này làm việc cho tôi hoàn hảo:

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

hoàn thành URL Demo : https://codepen.io/dimbslmh/full/mKfCc

bạn có thể dùng:

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

để tập trung nó cả theo chiều dọc và chiều ngang.

Bởi vì hầu hết câu trả lời ở đây không hoạt động, hoặc chỉ hoạt động một phần:

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

Bạn phải sử dụng bộ chọn [style] để chỉ áp dụng kiểu trên phương thức hiện đang hoạt động thay vì tất cả các phương thức. .insẽ là tuyệt vời, nhưng nó dường như chỉ được thêm vào sau khi quá trình chuyển đổi hoàn thành, quá muộn và làm cho một số chuyển đổi thực sự xấu. May mắn thay, nó xuất hiện bootstrap luôn áp dụng một thuộc tính style trên phương thức giống như khi nó bắt đầu hiển thị, vì vậy đây là một chút hack, nhưng nó hoạt động.

Các :not([style='display: none;'])phần là một cách giải quyết để bootstrap không loại bỏ một cách chính xác các thuộc tính phong cách và thay vào đó thiết lập các phong cách hiển thị không ai sánh kịp khi bạn đóng hộp thoại.

Bạn có thể đạt được trung tâm căn chỉnh dọc trên phương thức Bootstrap 3 như thế:

.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 */
}

và thêm lớp css này vào thùng chứa "modal-đàm thoại"

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

ví dụ làm việc của jsFiddle: http://jsfiddle.net/U4NRx/

Cách sạch nhất và đơn giản nhất để làm điều này là sử dụng Flexbox! Dưới đây sẽ sắp xếp theo chiều dọc một phương thức Bootstrap 3 ở giữa màn hình và rất đơn giản và đơn giản hơn tất cả các giải pháp khác được đăng ở đây:

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

LƯU Ý: Mặc dù đây là giải pháp đơn giản nhất, nhưng nó có thể không hoạt động với tất cả mọi người do hỗ trợ trình duyệt: http://caniuse.com/#feat=flexbox

Có vẻ như (bình thường) IE tụt lại phía sau. Trong trường hợp của tôi, tất cả các sản phẩm tôi phát triển cho bản thân hoặc cho khách hàng là IE10 +. (không có ý nghĩa kinh doanh khôn ngoan khi đầu tư thời gian phát triển hỗ trợ các phiên bản IE cũ hơn khi nó có thể được sử dụng để thực sự phát triển sản phẩm và đưa MVP ra nhanh hơn). Đây chắc chắn không phải là một thứ xa xỉ mà mọi người đều có.

Tôi đã thấy các trang web lớn hơn phát hiện xem flexbox có được hỗ trợ hay không và áp dụng một lớp cho phần thân của trang - nhưng mức độ kỹ thuật mặt trước đó khá mạnh mẽ và bạn vẫn cần dự phòng.

Tôi sẽ khuyến khích mọi người nắm lấy tương lai của web. Flexbox là tuyệt vời và bạn nên bắt đầu sử dụng nó nếu bạn có thể.

PS - Trang web này thực sự đã giúp tôi nắm bắt toàn bộ flexbox và áp dụng nó cho mọi trường hợp sử dụng: http://flexboxfroggy.com/

EDIT: Trong trường hợp có hai phương thức trên một trang, điều này sẽ áp dụng cho .modal.in

Ưu điểm:

• nội dung phương thức có thể truy cập ngay cả khi cao hơn thiết bị
• không sử dụng display:table-cell(điều đó không có nghĩa cho bố cục)
• không yêu cầu bất kỳ sửa đổi nào đối với phương thức Bootstrap 3 mặc định markup
• định vị là CSS thuần túy. JS được thêm vào để đóng phương thức khi nhấp / nhấn bên dưới và bên trên nó
• Tôi đã bao gồm không có tiền tố SCSScho những người sử dụng gulphoặcgrunt

// 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>

Lưu ý : Tôi dự định cập nhật câu trả lời này với thông số kỹ thuật mới nhất của Bootstrap 3. Đối với giải pháp Bootstrap 4, hãy xem câu trả lời này (hiện tại chúng ít nhiều giống nhau, nhưng theo thời gian chúng có thể phân kỳ). Nếu bạn tìm thấy bất kỳ lỗi hoặc vấn đề với nó, hãy cho tôi biết và tôi sẽ cập nhật. Cảm ơn.

Sạch sẽ, không có tiền tố SCSS(để sử dụng với 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);
  }
}

Một giải pháp CSS khác. Không hoạt động cho các cửa sổ bật lên lớn hơn cổng xem.

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

Trong .modal-dialoglớp ghi đè vị trí đến tuyệt đối (từ tương đối) và căn giữa nội dungright:0, left: 0

Trong .modal.fade .modal-dialog , .modal.in .modal-dialog cài đặt hình ảnh chuyển tiếp hơn toplà trên dịch.

margin-topdi chuyển cửa sổ bật lên bên dưới trung tâm trong trường hợp cửa sổ bật lên nhỏ và trong trường hợp cửa sổ bật lên dài, phương thức bị kẹt với tiêu đề. Vì thếmargin-top:0, margin-bottom:0

Cần tinh chỉnh thêm.

Đối với những người đang sử dụng bootstrap angular-ui có thể thêm các lớp dưới đây dựa trên thông tin trên:

Lưu ý: Không cần thay đổi nào khác và nó sẽ giải quyết tất cả các phương thức.

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

Không cần cho chúng tôi javascript. Phương thức Boostrap thêm lớp .in khi nó xuất hiện. Chỉ cần sửa đổi kết hợp lớp này với modal className.fade.in với flex css và bạn đã hoàn thành.

thêm css này vào trung tâm phương thức của bạn theo chiều dọc và chiều ngang.

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

Lựa chọn của tôi, chỉ là một chút CSS: (KHÔNG hoạt động trong 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;
}

Bạn có thể chơi với quy tắc đầu tiên để thay đổi cách thức phương thức xuất hiện.

Sử dụng: Bootstrap 3.3.4

Chỉ cần thêm CSS sau vào bạn hiện có, nó hoạt động tốt với tôi

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

Dựa trên câu trả lời của Arany , nhưng cũng chiếm kế toán cho cuộn trang.

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

Tôi nghĩ rằng đây là một giải pháp CSS thuần túy sạch hơn một chút so với giải pháp của Rens de Nobel. Ngoài ra, điều này không ngăn chặn việc đóng hộp thoại bằng cách nhấp vào bên ngoài nó.

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

Chỉ cần thêm một số lớp CSS vào bộ chứa DIV với lớp hộp thoại .modal để có được độ đặc hiệu cao hơn so với CSS bootstraps, ví dụ: .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>

Và làm cho thùng chứa .modal-hộp thoại này được cố định và định vị đúng.

CSS

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

Hoặc thậm chí đơn giản hơn bằng cách sử dụng flexbox.

CSS

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

Điều này hoạt động trong BS3, không được thử nghiệm trong v2. Nó tập trung các phương thức theo chiều dọc. Lưu ý rằng nó sẽ chuyển ở đó - nếu bạn muốn nó chỉ xuất hiện ở vị trí chỉnh sửa thuộc transitiontính CSS cho.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)
    });

Điều này cần câu trả lời của Arany và làm cho nó hoạt động nếu phương thức cao hơn chiều cao của màn hình:

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

Để thêm định tâm phương thức dọc cho bootstrap modal.js, tôi đã thêm phần này vào cuối Modal.prototype.showhàm:

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

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

Để thực hiện Modal verically Align Middle All.

/* Ghi chú:

1. Ngay cả khi bạn không cần gán bộ chọn, nó sẽ tìm tất cả phương thức từ tài liệu và đặt nó ở giữa theo chiều dọc

2. Để tránh giữa một số phương thức cụ thể làm trung tâm, bạn có thể sử dụng: không phải bộ chọn trong sự kiện nhấp

* /

 $( "[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);
  });

Từ Milan Pandya

Sử dụng tập lệnh đơn giản này tập trung vào các phương thức.

Nếu bạn muốn, bạn có thể đặt một lớp tùy chỉnh (ví dụ: .modal.modal-vcenter thay vì .modal) để giới hạn chức năng chỉ ở một số phương thức.

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

Đồng thời thêm sửa lỗi CSS này cho khoảng cách ngang của phương thức; chúng tôi hiển thị cuộn trên các phương thức, cuộn cơ thể được ẩn tự động bởi Bootstrap:

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

Một câu trả lời CSS khác cho câu hỏi này ...
Giải pháp này chỉ sử dụng CSS để đạt được hiệu quả mong muốn trong khi vẫn duy trì khả năng đóng chế độ bằng cách nhấp vào bên ngoài nó. Nó cũng cho phép bạn đặt .modal-contenttối đa chiều cao và chiều rộng để cửa sổ bật lên của bạn sẽ không phát triển ngoài tầm nhìn. Một cuộn sẽ tự động xuất hiện khi nội dung phát triển vượt quá kích thước phương thức.

lưu ý: Nên bỏ
Bootstrap .modal-dialog divđể nó hoạt động bình thường (dường như không phá vỡ bất cứ thứ gì). Đã thử nghiệm trong Chrome 51 và IE 11.

Mã CSS:

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

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

EDIT: Các .modal-dialoglớp cho phép bạn chọn hay không một người sử dụng có thể đóng modal bằng cách nhấn vào bên ngoài của các phương thức riêng của mình. Hầu hết các phương thức đều có nút 'đóng' hoặc 'hủy' rõ ràng. Hãy ghi nhớ điều này khi sử dụng cách giải quyết này.

Giải pháp tốt nhất để tập trung phương thức của bạn với chiều rộng và chiều cao là, trong css thêm và trong phương thức thêm 'tập trung' này dưới dạng một lớp ..

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

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

Căn giữa theo chiều dọc Thêm .modal-hộp thoại-tập trung vào .modal-hộp thoại để căn giữa theo chiều dọc của phương thức

Khởi chạy phương thức demo

<!-- 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>