如何使用 Tailwind CSS 将表单元素居中对齐？

您可以使用 flex 轻松地在中心对齐表单元素 财产 在 Tailwind CSS 中。顺风使用 对齐中心和项目中心 可替代 flex-property 的属性 在 CSS 中。

句法：

    ....

弹性属性：

• flex-col：此属性按列堆叠弹性项目。
• justify-center：当弹性项目按列堆叠时，此属性将弹性项目在垂直方向的中心对齐。
• items-center：当弹性项目按列堆叠时，此属性将中心的弹性项目在水平方向上对齐。

注意：当 flex 项目按行堆叠时， justify-content 属性会将 flex 项目在中间对齐 水平方向和 items-center 属性在垂直方向的中心对齐 flex 项目。

重要概念：每当您翻转 flex 的方向时，您也会同时翻转水平对齐( justify-{alignment} )和垂直对齐( items-{alignment} )。因此，如果 flex 在行方向，则 justify-{alignment} 在水平方向。当 flex 处于列方向时， justify-{alignment} 处于垂直方向。

它与 items-{alignment} 相反，即它是垂直方向，只要 flex 在行方向，否则它在列方向是水平的。

注意：重要的是为容器提供适当的高度，以便在水平和垂直方向的中心对齐表单或弯曲，即 h-screen (使元素跨越视口的整个高度)，因为默认情况下所有容器占据了它们的整个宽度，但它们并没有占据整个高度。

改变屏幕的高度很重要。

示例 1：

HTML

    
        
    
  
    
        

            

              Welcome to GeeksforGeeks
            
  
            

                
                
  
                
                    Login
                
            
        
    

输出：

示例 2：

HTML

    

  
    
  

          

            Welcome to GeeksforGeeks
          
  
          

            
               Select Course
            
             
                Data Structure
                Operating System
                Web Development
                Competitive Programming
              
            
  
            
              
                Requested Limit
              
              
                $20
                $25
                $15
                $10
              
            
  
            
              Confirm
            
          
        
  

  

输出：