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

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

  

输出 ：