Center a DIV horizontally and vertically

html

responsive-design

css

centering

byAlex Kataev·Sep 10, 2024

The most efficient way to center a DIV both horizontally and vertically is using CSS Flexbox. Just apply display: flex, justify-content: center, and align-items: center to the parent element. To ensure your content fills the screen vertically, use height: 100vh.

<style>
.centered-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

<div class="centered-container">
  <div>Your Content is Centered 🎯</div>
</div>

This code will do the job efficiently, putting your content right in the middle of .centered-container, regardless of screen size. 🚀

Backward compatibility and responsive design

While flexbox is well-supported in modern browsers, it's good to look into alternative techniques for consequential backward compatibility. If dealing with older browsers, consider using display: table, display: table-cell, text-align: center, and vertical-align: middle.

Additionally, applying max-width: 100% and max-height: 100% will avoid overflows in responsive designs. Couple this with overflow: auto to create scrollable content for smaller viewport sizes.

Remember, position: fixed can come in handy for stable centering, especially in scenarios like overlay modals, but don’t get it fixed in your head! 😉

Precise and aesthetic centering

Centering isn't just about the functionality, it's an art too. To achieve reliable and stylish centering, set your DIV's background color, width, and height to values that clearly manifest your desired aesthetic.

A word of advice, avoid antique methods like absolute positioning with negative margins as it could result in content clipping. Remember, in CSS, you’re not a savage, you’re an artist. Instead, let the CSS's innate magic (margin: auto) direct your absolute positioned content to the center.

The Old Way: CSS table properties

Before flexbox was all the rage, we had to make do with alternative strategies. Here's how to center a DIV the old-fashioned way:

.table-center-wrapper {
  display: table; /* Let's play pretend, this DIV is now a TABLE */
  width: 100%; /* The TABLE fills all available space */
}

.centered-content {
  display: table-cell; /* Our content is now a TABLE CELL, don't question it, just go with it */
  text-align: center; /* Horizontally centered just how we like it */
  vertical-align: middle; /* And BAM! Vertically centered as well. */
}

For the enclosing HTML:

<div class="table-center-wrapper">
  <div class="centered-content">
    Centered Content 🎯
  </div>
</div>

This might not look as cool as with flexbox, but hey, it gets the job done.

Adjusting to real-world dynamics

If your content's size changes dynamically or you need to account for various viewport dimensions, consider:

min-height on containers to ensure visibility at all times
calc() for dimensions that need to subtract fixed elements like a header or footer
padding or border which could affect centering due to the box model. Thwart this with box-sizing: border-box.

Addressing these caveats will avert common pitfalls, ensuring your centered DIV triumphs no matter the odds.

explain-codes / Html / Center a DIV horizontally and vertically

Linked

Aligning a float:left div to center?



How do I vertically center text with CSS?



Center image in table td in CSS



Flexbox: center horizontally and vertically



Center aligning a fixed position div