Open In App

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

Last Updated : 16 Jul, 2019
Improve
Improve
Like Article
Like
Save
Share
Report

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.




<!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=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
          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=
"https://code.jquery.com/jquery-3.3.1.slim.min.js" 
            integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
            crossorigin="anonymous">
  </script>
    
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" 
            integrity=
"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 
            crossorigin="anonymous">
  </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" 
            integrity=
"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" 
            crossorigin="anonymous">
  </script>
</body>
  
</html> 






                        








Output:




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











                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!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= 


"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 


          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= 


"https://code.jquery.com/jquery-3.3.1.slim.min.js" 


            integrity= 


"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"


            crossorigin="anonymous"> 


  </script> 


    <script src= 


"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" 


            integrity= 


"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 


            crossorigin="anonymous"> 


  </script> 


    <script src= 


"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" 


            integrity= 


"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" 


            crossorigin="anonymous"> 


  </script> 


</body> 


  


</html> 



















                        







                        








Output:




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











                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!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= 


"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 


          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 -->


    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 


            integrity= 


"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 


            crossorigin="anonymous"> 


  </script> 


    


    <script src= 


"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" 


            integrity= 


"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 


            crossorigin="anonymous"> 


  </script> 


    <script src= 


"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" 


            integrity= 


"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" 


            crossorigin="anonymous"> 


  </script> 


</body> 


  


</html> 



















                        







                        








Output:




                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Bootstrap 5 Table borders
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Difference between background and background-color
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                How to align image vertically in a division that spans vertically on the whole webpage using  CSS ?
            

        
    
        
            

                How to get a react bootstrap card to center vertically?
            

        
    
        
            

                Bootstrap 5 Modal Vertically Centered
            

        
    
        
            

                How to get the dimensions of the Viewport using AngularJS ?
            

        
    
        
            

                Semantic-UI Card Centered Variation
            

        
    
        
            

                Difference between self::$bar and static::$bar in PHP
            

        
    
        
            

                How to Set Calc Viewport Units Workaround in CSS ?
            

        
    
        
            

                How to change background-color on a specific wider viewport in CSS ?
            

        
    
        
            

                Role of ViewPort in Visual Formatting Model
            

        
    
        
            

                Why to use viewport value in <meta> tag in HTML ?
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
P

        

            
        

        

                                    


                                    

                                        Pankaj_Singh                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  






    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox