How to get card vertically centered between search bar and bottom of the viewport?

To center an HTML element horizontally you need to specify the width of the parent element. Similarly to center an HTML element vertically you need to specify the height of the parent element. Again to center an element horizontally as well vertically you need to specify the height and width of the parent element.

Now specifying the height and width can be tricky and you can achieve it in different ways.
Example 1: By specifically giving height and width to the parent element.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1
                   shrink-to-fit=no">
  
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" 
          href=
          integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 
          crossorigin="anonymous">
  
    <title>Center Element</title>
    <style>
        .outer {
            /* specifying height width for parent */
            min-width: 100vw;
            min-height: 100vh;
        }
          
        .flex-center {
            /* centering content of first child */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
        }
          
        .flex-center-2 {
            /* Centering elements in child div */
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
          
        .child-grow {
            flex-grow: 1;
            /* allowing some child to expand to 
            all width available (Concept in 
            bootstrap is same.) */
        }
    </style>
  
</head>
  
<body>
  
    <div class="container outer flex-center">
        <div class="row w-50 mt-5">
            <div class="input-group input-group-sm ">
                <div class="input-group-prepend">
                    <span class="input-group-text"
                          id="inputGroup-sizing-sm">
                      Search
                  </span>
                </div>
                <input type="text" 
                       class="form-control" 
                       aria-label="Small" 
                       aria-describedby="inputGroup-sizing-sm" />
            </div>
        </div>
        <div class="container child-grow flex-center-2">
            <div class="row ">
                <div class="card" 
                     style="width: 24rem;">
                    <div class="card-body">
                        <h5 class="card-title">
                                       Card Title
                                    </h5>
                        <p>This is some random text.</p>
                        <button class="btn btn-primary">
                          Button
                      </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
  
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src=
            integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
            crossorigin="anonymous">
  </script>
    
    <script src=
            integrity=
"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 
            crossorigin="anonymous">
  </script>
    <script src=
            integrity=
"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" 
            crossorigin="anonymous">
  </script>
</body>
  
</html>

chevron_right


Output:



Example 2: Using Bootstrap classes (Specifying width of child)

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1,
                   shrink-to-fit=no">
  
    <!-- Bootstrap CSS -->
    <link rel="stylesheet"
          href=
          integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 
          crossorigin="anonymous">
  
    
    <title>Center Element</title>
  
</head>
  
<body>
  
    <div class="container">
        <div class="row check d-flex 
                    justify-content-center
                    align-items-center" 
             style="height: 15vh;">
            
            <div class="input-group input-group-sm w-50">
                <div class="input-group-prepend">
                    <span class="input-group-text" 
                          id="inputGroup-sizing-sm">
                      Search
                  </span>
                </div>
                <input type="text" 
                       class="form-control" 
                       aria-label="Small" 
                       aria-describedby="inputGroup-sizing-sm" />
            </div>
        </div>
  
        <div class="row d-flex 
                    justify-content-center 
                    align-items-center" 
             style="height: 85vh;">
  
            <div class="card" style="width: 24rem;">
                <div class="card-body">
                    <h5 class="card-title">
                       Card Title
                    </h5>
                    <p>This is some random text.</p>
                    <button class="btn btn-primary">
                      Button
                  </button>
                </div>
            </div>
        </div>
  
    </div>
  
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src=
            integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous">
  </script>
    <script src=
            integrity=
"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 
            crossorigin="anonymous">
  </script>
    <script src=
            integrity=
"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" 
            crossorigin="anonymous">
  </script>
</body>
  
</html>

chevron_right


Output:

Example 3: Using Bootstrap classes (Using bootstrap flexbox classes)

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1,
                   shrink-to-fit=no">
  
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" 
          href=
          integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 
          crossorigin="anonymous">
  
    <title>Center Element</title>
</head>
  
<body>
  
    <div class="container min-vh-100 d-flex flex-column">
        <div class="row mt-5">
            <div class="col-md-6 offset-md-3">
                <div class="input-group input-group-sm">
                    <div class="input-group-prepend">
                        <span class="input-group-text" 
                              id="inputGroup-sizing-sm">
                          Search
                      </span>
                    </div>
                    <input type="text"
                           class="form-control"
                           aria-label="Small"
                           aria-describedby="inputGroup-sizing-sm" />
                </div>
            </div>
        </div>
  
        <div class="row flex-grow-1 justify-content-center">
            <div class="align-self-center">
                <div class="card" style="width: 24rem;">
                    <div class="card-body">
                        <h5 class="card-title">
                               Card Title
                            </h5>
                        <p>
                          This is some random text.
                      </p>
                        <button class="btn btn-primary">
                          Button
                      </button>
                    </div>
                </div>
            </div>
        </div>
  
    </div>
  
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
            integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
            crossorigin="anonymous">
  </script>
    
    <script src=
            integrity=
"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 
            crossorigin="anonymous">
  </script>
    <script src=
            integrity=
"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" 
            crossorigin="anonymous">
  </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.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.