Complete Guide: Horizontally Center a Div with CSS

To horizontally center a <div> within another <div> in CSS, you can use several reliable methods including Flexbox with justify-content: center, the classic margin: 0 auto technique, CSS Grid with justify-self: center, or text-align: center for inline elements. Each method has its advantages depending on your layout requirements and browser compatibility needs.

Contents

• Flexbox Method
• Margin Auto Method
• CSS Grid Method
• Text-Align Method
• Comparison and Recommendations

Flexbox Method

The Flexbox approach is the most modern and versatile method for centering elements. By setting the parent container as a flex container and using justify-content: center, you can easily center child elements both horizontally and vertically.

#outer {
  display: flex;
  justify-content: center;
}

/* Optional: if you want vertical centering too */
#outer {
  display: flex;
  justify-content: center;
  align-items: center;
}

Explanation:

• display: flex converts the parent container into a flex container
• justify-content: center aligns flex items along the main axis (horizontally)
• This method works regardless of the child element’s width and doesn’t require fixed dimensions

According to the Built In article, “The display: flex method uses the CSS flexbox layout to center the div both horizontally and vertically within its parent container.” This method is widely supported in all modern browsers.

Margin Auto Method

This is the traditional method that has been around since early CSS and remains one of the most reliable ways to center block-level elements.

#inner {
  margin-left: auto;
  margin-right: auto;
  width: 50%; /* or any specific width */
}

Or the shorthand version:

#inner {
  margin: 0 auto;
  width: 50%;
}

Explanation:

• Setting both left and right margins to auto tells the browser to distribute the remaining space equally on both sides
• The child element must have a defined width for this to work properly
• This method works with block-level elements and doesn’t require the parent to have any special properties

As Nile Bits explains, “By setting both the left and right margins to auto, the browser will automatically calculate and distribute the remaining space equally on either side of the element, effectively centering it horizontally within its parent container.”

CSS Grid Method

CSS Grid provides another powerful modern approach for centering elements, offering similar simplicity to Flexbox but with different layout capabilities.

#outer {
  display: grid;
  justify-items: center; /* Centers items horizontally within grid cells */
}

/* Or if you want to center a specific grid item: */
#inner {
  justify-self: center;
}

Explanation:

• display: grid creates a grid container
• justify-items: center centers all grid items horizontally within their grid cells
• Alternatively, justify-self: center can be applied to individual child elements

According to Nile Bits, “By setting justify-self to center on the child element, CSS Grid will center the element horizontally within its grid cell, effectively centering it within the grid container.”

Text-Align Method

This method works specifically for inline or inline-block elements and is the simplest approach for centering text or inline elements.

#outer {
  text-align: center;
}

#inner {
  display: inline-block;
}

Explanation:

• text-align: center centers inline content within the block-level container
• The child element needs to be display: inline-block or inline for this to work
• This method is primarily for text elements but can work for inline divs

As noted in the research, this method “only works with text” for traditional block elements, but can be extended to inline-block elements.

Comparison and Recommendations

Method Comparison Table

Recommendations for Modern Development

1. For most cases, use Flexbox - It’s the most versatile and widely supported modern method
2. Use Margin Auto for simple cases where you need maximum browser compatibility
3. Consider CSS Grid when you’re already using grid-based layouts
4. Avoid Text Align for block divs unless you specifically need inline behavior

As Josh W. Comeau explains, “Back in the day, centering an element was one of the trickiest things in CSS. As the language has evolved, we’ve been given lots of new tools we can use.” The Flexbox method is now recommended as the primary approach for modern web development.

For the best compatibility and maintainability, I recommend starting with the Flexbox method as your default choice, as it provides the most consistent results across modern browsers and offers the most flexibility for responsive designs.

Sources

1. How to Center a Div Horizontally and Vertically in CSS | Built In
2. The Ultimate Guide To Vertical And Horizontal Div Centering | Nile Bits
3. Complete Guide to Centering in CSS | Modern CSS Solutions
4. Centering in CSS Guide | CSS-Tricks
5. How to Center Anything in CSS Using Flexbox and Grid | FreeCodeCamp
6. CSS Horizontal & Vertical Align | W3Schools

Conclusion

Centering a div horizontally in CSS has become much simpler with modern techniques. The Flexbox method (display: flex + justify-content: center) is now the recommended approach for most modern web development projects, offering excellent browser support and flexibility. The traditional margin auto technique remains a reliable fallback for maximum compatibility, while CSS Grid provides an alternative when working with grid-based layouts. Choose your method based on your specific project requirements, browser compatibility needs, and whether you might want to extend to vertical centering in the future. For most contemporary web applications, starting with Flexbox will give you the best balance of simplicity, power, and browser support.