Skip to content
Related Articles

Related Articles

Improve Article

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

Property Value:

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



<!DOCTYPE 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;
        <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
        function changeAlign() {
                .style.alignContent = "center";


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 arrow_drop_up
Recommended Articles
Page :