Vertically centering a div inside another div

html

responsive-design

css

flexbox

byAnton Shumikhin·Mar 9, 2025

Lookin' for a quick fix? Whip out your Flexbox katana and slice the problem in half.

Apply the ol' display: flex; combined with justify-content: center; and align-items: center; to your parent div. This turns into a flex container and centers your child div in one swell foop.

Watch this cut and paste masterpiece:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px; /* Radio Tower or Anthill. Your choice, we don't judge; */
}

.centered {
  margin: auto; /* This centers the child horizontally but also works for surprise parties */
}

<div class="container">
  <div class="centered">Vertically Centered Masterpiece</div>
</div>

From Tokyo to Tallinn, your .centered div is now vertically and horizontally centered, no Jetlags! No need to worry about div sizes with this.

The nuts and bolts (For geeks and aficionados)

While Flexbox is the convenient kid on the block, in certain neighborhoods, you might need to know some traditional and alternative techniques, along with their quirks.

Workaround #1: Absolute positioning and transforms

When Flexbox is at its remedial class, you can fallback on CSS transforms clubbing with absolute positioning.

.parent {
  position: relative;
  height: 100px; /* Sky is the limit until it's 100px */
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Slide to the left, now slide to the right */
}

Practice this well, and you can moonwalk around legacy browsers.

Workaround #2: Playing Tables

Missing those school days of sketching on wooden desks? Here’s a chance to relive those with CSS:

.parent {
  display: table; /* Who said playing with tables was rude? */
  height: 200px; 
}

.child {
  display: table-cell;
  vertical-align: middle; /* Elementary School art class, anyone? */
}

But be wary! This senior citizen, display: table-cell;, enjoys an afternoon nap and might slow down your rendering performance.

It's all about community support. Or Browser Support

Remember, not all browsers are hip. Some are the equivalent of grumpy old men who refuse to change. For them, we have vendor prefixes -webkit- and -ms-, that help them digest newer CSS properties.

Adapting to the tidal wave (Dynamic Content)

Sometimes, the size of the contents in a div change. Just like our moods for diets. But we need our diets (or divs) to remain well-centered:

Flexbox adapts to your yo-yo content sizes as well as a yoga master.
Absolute positioning aided by margin: auto also provides similar flexibility, but in the style of a gymnast performing the splits. top: 0; left: 0; bottom: 0; right: 0; setup is a must.

The Art of Avoidance

Shun explicit margin-top values like you would dodge spoilers. They are high-maintenance and need adjusting with div size changes.

Spilling the beans (Resources and Examples to follow)

To evolve from a stargazing padawan to a CSS Jedi, don't hesitate to get your hands dirty with live codes:

Add CodePen and JSFiddle to your armory for live-tweaking and dissection of centering codes.
Run through the alley of CSS-Tricks Guide that conceals an encyclopedic array of centering techniques waiting to be mastered by you.
And remember the mantra: To learn Flexbox, you must be the Froggy. Use Flexbox Froggy to refine your understanding.