Article Categories

Selected Reading

How to align flexbox container into center using JavaScript?

Javascript Web Development Front End Technology

To align a flexbox container to the center using JavaScript, you can manipulate the container's CSS properties through the DOM. This involves selecting the container element and applying flexbox properties to center its content horizontally and optionally vertically.

Flexbox is a CSS3 layout mode that provides powerful alignment and distribution capabilities for elements on a page. It's particularly useful for creating responsive layouts, navigation bars, and galleries.

Methods to Center Flexbox Content

There are several approaches to center flexbox containers using JavaScript:

Using justify-content: Centers items horizontally within the flex container by setting the justify-content property to center.
Using align-items: Centers items vertically within the flex container by setting the align-items property to center.
Combined centering: Uses both justify-content and align-items to center items both horizontally and vertically.

Basic JavaScript Properties

To center flexbox content, you'll typically use these JavaScript style properties:

// Get the container element
var container = document.getElementById("container");

// Make it a flex container
container.style.display = "flex";

// Center horizontally
container.style.justifyContent = "center";

// Center vertically (optional)
container.style.alignItems = "center";

Example: Horizontal Centering

<!DOCTYPE html>
<html>
<head>
   <title>Center Flexbox Horizontally</title>
   <style>
      #container {
         height: 200px;
         border: 2px solid #333;
         background-color: #f0f0f0;
      }
      .item {
         padding: 20px;
         background-color: #4CAF50;
         color: white;
         margin: 5px;
      }
   </style>
</head>
<body>
   <div id="container">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
   </div>
   
   <script>
      var container = document.getElementById("container");
      container.style.display = "flex";
      container.style.justifyContent = "center";
   </script>
</body>
</html>

Example: Both Horizontal and Vertical Centering

<!DOCTYPE html>
<html>
<head>
   <title>Center Flexbox Both Ways</title>
   <style>
      #container {
         height: 300px;
         border: 2px solid #333;
         background-color: #f9f9f9;
      }
      .centered-item {
         padding: 30px;
         background-color: #2196F3;
         color: white;
         border-radius: 8px;
      }
   </style>
</head>
<body>
   <div id="container">
      <div class="centered-item">Perfect Center</div>
   </div>
   
   <script>
      var container = document.getElementById("container");
      container.style.display = "flex";
      container.style.justifyContent = "center";
      container.style.alignItems = "center";
   </script>
</body>
</html>

Dynamic Centering with Function

<!DOCTYPE html>
<html>
<head>
   <title>Dynamic Flexbox Centering</title>
   <style>
      .container {
         height: 200px;
         border: 2px solid #666;
         margin: 10px 0;
         background-color: #fafafa;
      }
      .box {
         width: 80px;
         height: 80px;
         background-color: #FF5722;
         color: white;
         display: flex;
         align-items: center;
         justify-content: center;
      }
   </style>
</head>
<body>
   <div class="container" id="container1">
      <div class="box">Box 1</div>
   </div>
   
   <button onclick="centerContainer('container1')">Center Container</button>
   
   <script>
      function centerContainer(containerId) {
         var container = document.getElementById(containerId);
         container.style.display = "flex";
         container.style.justifyContent = "center";
         container.style.alignItems = "center";
      }
   </script>
</body>
</html>

Key Properties Reference

Property	Purpose	Common Values
`display`	Make element a flex container	`flex`
`justify-content`	Horizontal alignment	`center`, `flex-start`, `flex-end`
`align-items`	Vertical alignment	`center`, `flex-start`, `flex-end`
`flex-direction`	Direction of flex items	`row`, `column`

Conclusion

Centering flexbox containers with JavaScript is straightforward using the justifyContent and alignItems style properties. This approach provides flexible, responsive centering for modern web layouts.

AmitDiwan

Updated on: 2026-03-15T23:19:00+05:30

3K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next