How to Vertically and Horizontally Center a Div Using Flexbox and Other Techniques

Centring a div both vertically and horizontally can be achieved through various methods. Among them, using Flexbox is the most modern and recommended approach. This guide will cover different techniques, focusing on Flexbox, while also discussing older methods that might be useful in specific scenarios.

Using Flexbox to Center a Div

The Flexbox layout is a powerful tool for positioning and sizing elements. Here's how you can center a div on both axes using Flexbox:

Apply display: flex to the parent element. Set align-items: center for vertical centering. Set justify-content: center for horizontal centering.

Here's an example in HTML and CSS:

I am vertically and horizontally centered.

.center { display: flex; align-items: center; justify-content: center; }

Add this to your parent div and it will center its child elements both vertically and horizontally.

Using Margin Auto to Center a Div

Another method involves using display: flex for the parent and margin: auto for the child. This approach is also effective:

.parent { display: flex; } .centerDiv { margin: auto; }

In this setup, the child div will be centered within its parent.

Best Practice with Flexbox

The best practice for centering a div both vertically and horizontally is to use Flexbox. You can achieve this with just a few lines of CSS:

.container { display: flex; justify-content: center; align-items: center; height: 100vh; /* Example height, adjust as needed */ }

When you apply these styles to a container, all its children will be centered both vertically and horizontally.

Older Method: Using Position and Transform Property

For situations where Flexbox might not be an option, you can use the position: absolute and transform: translate(-50%, -50%) properties to center a div:

.centerDiv { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

This technique aligns a div to the center of its parent element by adjusting its position dynamically.

Further Centering Techniques

If your goal is to horizontally center a div, you can use the following simple div style:

CONTENT WILL GO HERE

This will center any content inside the div. Adjust the max-width as needed according to the content.

Vertically Centering a Div Content

Vertically centering content within a div involves using the CSS position property. This is useful for aligning content within a fixed-height block, such as a card or section on a webpage.

Vertically align

Vertically align any content within div element

border: 5px solid green; height: 200px; width: 100%;

In this code, two divs are used. The outer div sets a fixed height and width, while the inner div's position is adjusted via the top and left properties. The transform property can also be adjusted for percentage-based alignment.

Conclusion

Whether you're working with a simple div or a complex layout, centering a div both vertically and horizontally is a fundamental skill in web development. Flexbox is the recommended method due to its simplicity and effectiveness, while other techniques can be useful in specific scenarios.

If you have any questions or need further assistance with centering divs, feel free to reach out in the comments.