Open In App

How to align flexbox container into center using JavaScript ?

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

In this article, we will set the alignment of content using JavaScript. The DOM Style alignContent property is used to align the items of a flexible container when they do not use all available space on the cross-axis.

Syntax:

object.style.alignContent = "center"

Property Value:

  • center: It is used to place the text content into the center of the container.

Example: This example uses the alignContent property value as the center to align items to center of the box.

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>
        How to align flexbox container
        into center using JavaScript?
    </title>
</head>

<body>
    <center>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>

        <h3>
            How to align flexbox container
            into center using JavaScript?
        </h3>
        
        <p>
            Click on button to change the
            alignContent to "center"
        </p>

        <div class="main">
            <div style="background-color:green;">
                Geeks
            </div>
            <div style="background-color:lightgreen;">
                For
            </div>
            <div style="background-color:green;">
                Geeks
            </div>
        </div>

        <button onclick="changeAlign()">
            Change alignContent
        </button>
    </center>
</body>
</html>
CSS 
.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;
}
JavaScript 
function changeAlign() {
    document.querySelector('.main')
        .style.alignContent = "center";
}

Output:


V
vkash8574
Improve
Article Tags :

Explore

Lightbox