How to align flexbox container into center using JavaScript ? Last Updated : 18 Apr, 2025 Summarize Comments Improve Suggest changes Share 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: Comment More infoAdvertise with us Next Article How to Centre a Button with Flexbox? V vkash8574 Follow Improve Article Tags : JavaScript JavaScript-Questions Similar Reads How to align text content into center using JavaScript ? In this article, we will align the text content into the center by using JavaScript. We use HTML DOM style textAlign property to set the alignment of text. The DOM style textAlign property is pretty much similar to the text-align property in the CSS, and the Dom textAlign property returns the horizo 1 min read How to align items in a flex container with JavaScript ? In CSS, the align-items property is used to align elements in a flex container. This can be similarly implemented using JavaScript by selecting the specific element using a selector method and then using the alignItems property to set the alignment. This can be useful in situations where dynamically 2 min read How to Center the JavaScript Alert Message Box ? An alert box is a dialogue box that pops up on the screen to provide information to the user. It contains a message and an OK button, which allow users to acknowledge the message and close the box. Alert boxes are commonly used in web development to display important messages, warnings, or notificat 4 min read How to vertically align text inside a flexbox using CSS? Vertically aligning text inside a flexbox involves positioning the text centrally within the vertical space of a flex container. This can be achieved using CSS properties such as align-items and justify-content to control the vertical alignment and centering of the text. Here we have some common app 2 min read How to Centre a Button with Flexbox? Flexbox can be used to align HTML elements with ease, making it a powerful tool for responsive design. By utilizing Flexbox properties, you can centre a button both horizontally and vertically within its container, or adjust its alignment to achieve specific layouts. These are the following ways to 2 min read How to Center a Flex Container but Left-Align Flex Items? When we use CSS Flexbox, we might encounter situations where we want to center a flex container within its parent while keeping the flex items inside it left-aligned. This interface is very common in web design to create balanced and visually appealing interfaces. Below are different approaches to c 4 min read Like