How can I vertically center a div element for all browsers using CSS?

html

responsive-design

css-grid

cross-browser-compatibility

byNikita Barsukov·Feb 11, 2025

Flexbox has become the Swiss knife for a majority of layout problems, including vertical alignment. Add display: flex and align-items: center to the parent container and your content will be centered:

div {
  display: flex; /* Unleash the power of Flexbox */
  align-items: center; /* "Valar Alignis" - All elements must align */
  height: 100vh; /* Because we love full height! */
}

<div>
  <div>Hello, Middle-Earth!</div>
</div>

The inner div would be in the center, singing happily - ♫ I'm in the Middle of it all ♫.

Various techniques // More than one way to center a div

The CSS Table property method

Before Flexbox, people used CSS table properties. Yes, using tables for centering is as old as the Internet itself.

parent-div {
  display: table; /* Emulating HTML tables, long live the 90s */
  height: 100%; /* Fits the parent */
}

child-div {
  display: table-cell; /* I've got the power of a cell */
  vertical-align: middle; /* "Valar Alignis" also works here */
}

Now bring them to life:

<div class="parent-div">
  <div class="child-div">Centering never felt so 90s</div>
</div>

Absolute power corrupts... not in CSS

If absolute power corrupts absolutely, absolute positioning centres absolutely:

div {
  position: absolute; /* Be still, and stay where I put you */
  top: 50%; left: 50%; /* The intersection of dreams */
  transform: translate(-50%, -50%); /* Or magic, plain magic */
  width: 50%; /* Choose your destiny */
}

Apply these styles to any div:

<div>Stuck in the middle with you</div>

Don't forget the -webkit- and -ms- prefixes. They're the knights in shiny armour for cross-browser compatibility.

CSS Grid - the new kid on the block

If you're hip like that, CSS Grid offers another effective method:

div {
  display: grid; /* Welcome to the future */
  place-items: center; /* Hogwarts, center us! */
  height: 100vh; /* Still in love with full height */
}

Stick it on a div:

<div>Help, I'm stuck in the middle!</div>

When fluidity becomes a challenge // Handling dynamic changes

Float like a butterfly, align like a pro - Responsive design

To keep up with changeable content size, use relative units and min/max properties:

div {
  max-width: 90%; /* Constraint or freedom? */
  max-height: 80vh; /* Adapting like a chameleon */
  margin:auto; /* A dash of centering magic */
}

Overflow control - Keep things in check

Overflow is like the rebellious spirit who defies constraints. Tame it with overflow: auto:

div {
  overflow: auto; /* Anarchy is not a virtue */
}

Dynamic alignments - Embrace flexibility

For content with unpredictable sizes, be ready to flex:

div {
  display: flex; /* Keep the stars aligned */
  align-items: center; /* Centre alignment - Always en vogue */
  height: auto; /* Let content be the boss */
}