How to Align modal content box to center of any screen?

The Bootstrap Modal plugin is a dialog box/popup window that is displayed on top of the current page. By default, the Bootstrap modal window is aligned to the top of the page with some margin. But you can align it in the middle of the page vertically by using CSS vertical-align property. We also can use JavaScript to centered the modal
Below examples illustrate the approach:

Example 1: First, we will design modal content for the sign-up then by using CSS we will align that modal centered(vertically). Using the vertical-align property, the vertical-align property sets the vertical alignment of an element.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Bootstrap Modal Alignment</title>
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
          integrity=
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
          crossorigin="anonymous">
    <script src=
    </script>
    <script src=
    </script>
  
    <style>
        
        /* 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;
            }
        }
    </style>
</head>
  
<body>
  
    <h1>
      GeeksforGeeks
    </h1>
    <p>
      A Computer Science Portal for Geeks
    </p>
    <a href="#signupModal" data-toggle="modal">
      Sign-Up</a>
  
    <div class="modal" id="signupModal"
         role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
  
        <div class="modal-dialog">
            <div class="modal-content">
  
                <!-- Modal root -->
                <div class="m-header">
                    <button class="close" data-dismiss="modal">
                        ×
                    </button>
                    <h2 class="myModalLabel"> Sign Up </h2>
                </div>
  
                <!-- Modal body -->
                <div class="inputs">
  
                    <!-- username input -->
                    <div class="form-group input-group">
                        <label for="username" class="sr-only">
                          Username
                        </label>
                        <span class="input-group-addon">
                          <i class="fa fa-user"></i>
                        </span>
                        <input type="text" class="form-control" 
                               id="username" placeholder="Username">
                    </div>
  
                    <!-- Email input -->
                    <div class="form-group input-group">
                        <span class="input-group-addon">
                          <i class="fa fa-envelope"></i>
                        </span>
                        <label for="email" class="sr-only">
                          Email
                        </label>
                        <input type="email" class="form-control" 
                               id="email" placeholder="Email Address">
                    </div>
  
                    <!-- Password -->
                    <div class="form-group input-group">
                        <span class="input-group-addon">
                          <i class="fa fa-lock"></i>
                        </span>
                        <label for="password" class="sr-only">
                          Password
                        </label>
                        <input type="password" class="form-control"
                               id="password" placeholder="Choose a password">
                    </div>
  
                    <!-- Confirm Password -->
                    <div class="form-group input-group">
                        <span class="input-group-addon">
                          <i class="fa fa-lock"></i>
                        </span>
                        <label for="password2" class="sr-only">
                          Confirm Password
                        </label>
                        <input type="password" class="form-control" 
                               id="password2" placeholder="Confirm password">
                    </div>
                </div>
  
                <!-- Modal footer -->
                <div class="footer">
                    <button type="submit">Sign Up</button>
                    <p>
                        Already have an account?!
                        <a href="#loginModal" data-toggle="modal"
                           data-dismiss="modal">
                           Login!
                        </a>
                    </p>
                </div>
  
            </div>
        </div>
    </div>
  
</body>
  
</html>

chevron_right


Output :



Example 2: Similarly we first create a modal content for the sign-up then instead of CSS we will use JavaScript to centered the modal(vertically). We will use CSS for designing just. In this example first, use the find() method to find out the modal dialog. Then subtract the modal height from the window height and divide that into half and will place the modal that will be the centered(vertically). This solution will dynamically adjust the alignment of the modal.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Center Align Bootstrap Modal Vertically</title>
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
          integrity=
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
          crossorigin="anonymous">
    <script src=
    </script>
    <script src=
    </script>
  
    <style>
        
        /* 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;
            }
        }
    </style>
</head>
  
<body>
  
    <h1>
      GeeksforGeeks
    </h1>
    <p>
      A Computer Science Portal for Geeks
    </p>
    <a href="#signupModal" data-toggle="modal">
      Sign-Up
    </a>
  
    <div class="modal" id="signupModal"
         role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
  
        <div class="modal-dialog">
            <div class="modal-content">
  
                <!-- Modal root -->
                <div class="m-header">
                    <button class="close" data-dismiss="modal">
                        ×
                    </button>
                    <h2 class="myModalLabel">Sign Up</h2>
                </div>
  
                <!-- Modal body -->
                <div class="inputs">
  
                    <!-- username input -->
                    <div class="form-group input-group">
                        <label for="username" class="sr-only">
                          Username
                        </label>
                        <span class="input-group-addon">
                          <i class="fa fa-user"></i>
                        </span>
                        <input type="text" class="form-control" 
                               id="username" placeholder="Username">
                    </div>
  
                    <!-- Email input -->
                    <div class="form-group input-group">
                        <span class="input-group-addon">
                          <i class="fa fa-envelope"></i>
                        </span>
                        <label for="email" class="sr-only">
                          Email
                        </label>
                        <input type="email" class="form-control" 
                               id="email" placeholder="Email Address">
                    </div>
  
                    <!-- Password -->
                    <div class="form-group input-group">
                        <span class="input-group-addon">
                          <i class="fa fa-lock"></i>
                        </span>
                        <label for="password" class="sr-only">
                          Password
                        </label>
                        <input type="password" class="form-control"
                               id="password" placeholder="Choose a password">
                    </div>
  
                    <!-- Confirm Password -->
                    <div class="form-group input-group">
                        <span class="input-group-addon">
                          <i class="fa fa-lock"></i>
                        </span>
                        <label for="password2" class="sr-only">
                          Confirm Password
                        </label>
                        <input type="password" class="form-control" 
                               id="password2" placeholder="Confirm password">
                    </div>
                </div>
  
                <!-- MOdal footer -->
                <div class="footer">
                    <button type="submit">Sign Up</button>
                    <p>
                        Already have an account?!
                        <a href="#loginModal" data-toggle="modal"
                           data-dismiss="modal">
                           Login!
                        </a>
                    </p>
                </div>
  
            </div>
        </div>
    </div>
  
    <script>
        $(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);
            });
        });
    </script>
  
</body>
  
</html>

chevron_right


Output :




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.