您如何在页面上水平居中引导模式？

Question

I am trying to get my bootstrap modal to center horizontally on the page after it has appeared, but I can only seem to get the code to center it vertically. Here is my code so far:

$(document).ready(function () {
            function alignModal() {
                var modalDialog = $(this).find(".modal-dialog");

                // Applying the top margin on modal dialog to align it vertically center
                modalDialog.css("margin-top", Math.max(0, ($(window).height() - modalDialog.height()) / 2));
            }
            // Align modal when it is displayed
            $(".modal").on("shown.bs.modal", alignModal);

            // Align modal when user resize the window
            $(window).on("resize", function () {
                $(".modal:visible").each(alignModal);
            });
        });

Answer 1

Do you mean center vertically ? Because you wrote "horizontally" twice. If vertically: From Bootstrap's documentation page :

Add .modal-dialog-centered to.modal-dialog to vertically center the modal.