如何在 Tailwind CSS 中全屏垂直对齐 div？

您可以使用 Tailwind CSS 中的flex属性轻松地在全屏上垂直对齐 div。 Tailwind 使用justify-center和items-center属性，这是 CSS 中 flex-property 的替代品。

句法：

    . . .   

弹性属性：

• h-screen：它使元素跨越视口的整个高度，因为默认情况下所有容器都占据它们的整个宽度，但它们不会占据它们的整个高度。
• justify-center：当弹性项目按行堆叠时，此属性在水平方向（主轴）的中心对齐弹性项目。
• items-center：当弹性项目按行堆叠时，该属性将弹性项目在垂直方向（横轴）的中心对齐。

注意：当弹性项目按列堆叠时， justify-content 属性将弹性项目在垂直方向居中对齐，而 items-center 属性将弹性项目在水平方向居中对齐。

重要概念：每当您翻转 flex 的方向时，您也会同时翻转水平对齐（ justify-{alignment} ）和垂直对齐（ items-{alignment} ）。所以 justify-{alignment} 如果 flex 在行方向，则在水平方向。当 flex 在列方向时， justify-{alignment} 在垂直方向。

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

示例 1：

HTML

  

    

  

    

        

            

                GeeksforGeeks
            
              
            Align div vertically
        
    

  

输出：从这个示例中，您可以观察到粉红色框在整个屏幕上垂直对齐。

示例 2：使用 m-auto 使元素居中。这 m-auto用于将项目水平和垂直居中。以下示例将在整个屏幕上垂直和水平对齐div 。

HTML

  

    

  

    

        

            

                GeeksforGeeks
            
             LEFT BOX
        
          
        

            

                GeeksforGeeks
            
             RIGHT BOX
        
    

  

输出：