如何将模态内容框与任何屏幕的中心对齐？

Bootstrap Modal 插件是一个对话框/弹出窗口，显示在当前页面的顶部。默认情况下，Bootstrap 模式窗口与页面顶部对齐，并留有一些边距。但是您可以使用 CSS vertical-align 属性在页面中间垂直对齐它。我们也可以使用 JavaScript 将模态居中
以下示例说明了该方法：

示例 1：首先，我们将为注册设计模态内容，然后使用 CSS 将模态居中(垂直)对齐。使用 vertical-align 属性，vertical-align 属性设置元素的垂直对齐方式。

  

    Bootstrap Modal Alignment
    
    
    
    
    
    
  
    
        
        /* Text alignment for body */
        body {
            text-align: center;
        }
          
        /* Styling h1 tag */
        h1 {
            color: green;
            text-align: center;
        }
          
        /* Styling modal */
        .modal:before {
            content: '';
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }
          
        .modal-dialog {
            display: inline-block;
            vertical-align: middle;
        }
          
        .modal .modal-content {
            padding: 20px 20px 20px 20px;
            -webkit-animation-name: modal-animation;
            -webkit-animation-duration: 0.5s;
            animation-name: modal-animation;
            animation-duration: 0.5s;
        }
          
        @-webkit-keyframes modal-animation {
            from {
                top: -100px;
                opacity: 0;
            }
            to {
                top: 0px;
                opacity: 1;
            }
        }
          
        @keyframes modal-animation {
            from {
                top: -100px;
                opacity: 0;
            }
            to {
                top: 0px;
                opacity: 1;
            }
        }
    

  

  
    
      GeeksforGeeks
    
    
      A Computer Science Portal for Geeks
    
    
      Sign-Up
  
    
  
        
            
  
                
                
                    
                        ×
                    
                     Sign Up 
                
  
                
                
  
                    
                    
                        
                          Username
                        
                        
                          
                        
                        
                    
  
                    
                    
                        
                          
                        
                        
                          Email
                        
                        
                    
  
                    
                    
                        
                          
                        
                        
                          Password
                        
                        
                    
  
                    
                    
                        
                          
                        
                        
                          Confirm Password
                        
                        
                    
                
  
                
                
                    Sign Up
                    
                        Already have an account?!
                        
                           Login!
                        
                    
                
  
            
        
    
  

  

输出 ：

示例 2：类似地，我们首先为注册创建一个模态内容，然后我们将使用 JavaScript 将模态(垂直)居中而不是 CSS。我们将使用 CSS 进行设计。在这个例子中，首先使用find() 方法找出模态对话框。然后从窗口高度中减去模态高度并将其分成两半，然后放置将居中(垂直)的模态。此解决方案将动态调整模态的对齐方式。

  

    Center Align Bootstrap Modal Vertically
    
    
    
    
    
    
  
    
        
        /* Text alignment for body */
        body {
            text-align: center;
        }
          
        /* Styling h1 tag */
        h1 {
            color: green;
            text-align: center;
        }
          
        /* Styling modal */
        .modal .modal-content {
            padding: 20px 20px 20px 20px;
            -webkit-animation-name: modal-animation;
            -webkit-animation-duration: 0.5s;
            animation-name: modal-animation;
            animation-duration: 0.5s;
        }
          
        @-webkit-keyframes modal-animation {
            from {
                top: -100px;
                opacity: 0;
            }
            to {
                top: 0px;
                opacity: 1;
            }
        }
          
        @keyframes modal-animation {
            from {
                top: -100px;
                opacity: 0;
            }
            to {
                top: 0px;
                opacity: 1;
            }
        }
    

  

  
    
      GeeksforGeeks
    
    
      A Computer Science Portal for Geeks
    
    
      Sign-Up
    
  
    
  
        
            
  
                
                
                    
                        ×
                    
                    Sign Up
                
  
                
                
  
                    
                    
                        
                          Username
                        
                        
                          
                        
                        
                    
  
                    
                    
                        
                          
                        
                        
                          Email
                        
                        
                    
  
                    
                    
                        
                          
                        
                        
                          Password
                        
                        
                    
  
                    
                    
                        
                          
                        
                        
                          Confirm Password
                        
                        
                    
                
  
                
                
                    Sign Up
                    
                        Already have an account?!
                        
                           Login!
                        
                    
                
  
            
        
    
  
    
        $(document).ready(function() {
              
            /* Centering the modal vertically */
            function alignModal() {
                var modalDialog = $(this).find(".modal-dialog");
                modalDialog.css("margin-top", Math.max(0, 
                ($(window).height() - modalDialog.height()) / 2));
            }
            $(".modal").on("shown.bs.modal", alignModal);
  
            /* Resizing the modal according the screen size */
            $(window).on("resize", function() {
                $(".modal:visible").each(alignModal);
            });
        });
    
  

  

输出 ：