如何居中<div>使用 CSS 的 Flexbox 属性？

在本文中，我们将学习使用flexbox将 HTML div 元素居中 CSS 的属性。

请参阅本文以了解有关 flexbox 的更多信息。

方法：使用 flexbox 将

元素水平居中。

• 我们使用display set的属性来flex ie display: flex;
• 使用 align-items: center;将项目居中对齐。
• 最后一步是将justify-content设置为 center ，即justify-content: center;

示例 1：以下示例使用 flex 属性。

HTML

  

    

  

    
GeeksforGeeks
    

        This text is centered
    

  

输出：

示例2：如果我们想要将

水平和垂直居中，我们只需添加height: 500px;在代码的 CSS 部分。

HTML

  

    

  

    
GeeksforGeeks
    

        This text is centered
    

  

输出：