如何使卡片垂直位于搜索栏和视口底部之间的中心位置？

要使HTML元素水平居中，您需要指定父元素的宽度。与垂直放置HTML元素居中类似，您需要指定父元素的高度。再次要使元素水平和垂直居中，您需要指定父元素的高度和宽度。

现在，指定高度和宽度可能很棘手，您可以通过不同的方式来实现。
示例1：通过为父元素专门指定高度和宽度。

  

    
    
    
  
    
    
  
    Center Element
    
        .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.) */
        }
    
  

  

  
    
        
            
                
                    
                      Search
                  
                
                
            
        
        
            
                
                    
                        
                                       Card Title
                                    
                        This is some random text.
                        
                          Button
                      
                    
                
            
        
    
  
    
    
    
  
    
    
  
    
  

  

输出：

示例2：使用Bootstrap类(指定子级的宽度)

  

    
    
    
  
    
    
  
    
    Center Element
  

  

  
    
        
            
            
                
                    
                      Search
                  
                
                
            
        
  
        
  
            
                
                    
                       Card Title
                    
                    This is some random text.
                    
                      Button
                  
                
            
        
  
    
  
    
    
    
  
    
  
    
  

  

输出：

示例3：使用Bootstrap类(使用Bootstrap Flexbox类)

  

    
    
    
  
    
    
  
    Center Element

  

  
    
        
            
                
                    
                        
                          Search
                      
                    
                    
                
            
        
  
        
            
                
                    
                        
                               Card Title
                            
                        
                          This is some random text.
                      
                        
                          Button
                      
                    
                
            
        
  
    
  
    
    
    
  
    
    
  
    
  

  

输出：