如何使用 JavaScript 将 flexbox 容器居中对齐？

在本文中，我们将使用 JavaScript 设置内容的对齐方式。 DOM 样式 alignContent 属性用于在灵活容器的项目未使用横轴上的所有可用空间时对齐它们。

句法：

object.style.alignContent = "center"

适当的价值：

• center：用于将文本内容置于容器的中心。

例子：

HTML

  

    
        How to align flexbox container
        into center using JavaScript?
    

  

    
        .main {
            width: 250px;
            height: 300px;
            border: 1px solid;
            display: flex;
            flex-flow: row wrap;
        }
  
        .main div {
            width: 250px;
            height: 70px;
            font-size: 2rem;
            text-align: center;
        }
    

  

    
        
            GeeksforGeeks
        
  
        
            How to align flexbox container
            into center using JavaScript?
        
          
        
            Click on button to change the
            alignContent to "center"
        
  
        
            
                Geeks
            
            
                For
            
            
                Geeks
            
        
  
        
            Change alignContent
        
    
  
    
        function changeAlign() {
            document.querySelector('.main')
                .style.alignContent = "center";
        } 
    

  

输出：

点击按钮前：

点击按钮后：