How to align flexbox container into center using JavaScript ?

Last Updated : 25 Dec, 2020

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 center of the container.

Example:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to align flexbox container
        into center using JavaScript?
    </title>
</head>
  
<head>
    <style>
        .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;
        }
    </style>
</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>
  
    <script>
        function changeAlign() {
            document.querySelector('.main')
                .style.alignContent = "center";
        } 
    </script>
</body>
  
</html>

Output:

Before Click the Button:

After Click the Button:

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML course.

My Personal Notes

Related Articles

How to align flexbox container into center using JavaScript ?

HTML