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

30 Jul, 2021
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 modalBelow 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.
<!DOCTYPE html><html>  <head>    <title>Bootstrap Modal Alignment</title>    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"           crossorigin="anonymous">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">    </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>
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.
<!DOCTYPE html><html>  <head>    <title>Center Align Bootstrap Modal Vertically</title>    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"           integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"           crossorigin="anonymous">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">    </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>
Output :
HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Misc
HTML-Misc
JavaScript-Misc
Picked
Technical Scripter 2019
Bootstrap
CSS
HTML
Technical Scripter
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
Create a Homepage for Restaurant using HTML , CSS and Bootstrap
How to place two bootstrap cards next to each other ?
How to Use Bootstrap with React?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
Types of CSS (Cascading Style Sheet)