Open In App
Related Articles

How to align flexbox container into center using JavaScript ?

Improve Article
Save Article
Like Article

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: = "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.


<!DOCTYPE html>
        How to align flexbox container
        into center using JavaScript?
        <h1 style="color: green">
            How to align flexbox container
            into center using JavaScript?
            Click on button to change the
            alignContent to "center"
        <div class="main">
            <div style="background-color:green;">
            <div style="background-color:lightgreen;">
            <div style="background-color:green;">
        <button onclick="changeAlign()">
            Change alignContent


.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;


function changeAlign() {
        .style.alignContent = "center";

Output: Click here to check the live output.


Last Updated : 12 Jan, 2023
Like Article
Save Article
Similar Reads
Related Tutorials