如何将 flexbox 垂直和水平对齐到中心？

正如我们已经知道的，flexbox 是一个模型而不仅仅是一个 CSS 属性。
下图显示了一个有两个轴的盒子，一个是主轴(即水平轴)和交叉轴(即垂直轴)。为了在中心对齐 flexbox，水平和垂直，我们需要在这两个轴上工作。

所以，首先，我们需要记住这里的两个 CSS 属性，它们是：

• 证明内容
• 对齐项目

第一个属性，即 justify-content，是在主轴(水平轴)上对齐任何 HTML 元素。第二个属性是在横轴上对齐任何 HTML 元素，横轴是垂直轴。
因此，要在屏幕中央水平和垂直对齐 HTML 元素，我们必须将这两个属性的值都设置为“center”。
句法：

.gfg-box {
    display: flex;
    justify-content: center;
    align-items: center;
}

例子：

html

 

    
    
    

 

 
    

        

            
GeeksforGeeks
        
    
 

 

输出：

注意： ‘height’属性在‘HTML’ 、 ‘body’和‘gfg-box’ 中的值应为‘100% ‘。
要了解有关 flexbox 及其所有属性的更多信息，请参阅本文。