How to center div vertically inside of absolutely positioned parent div

html

css-transform

responsive-design

best-practices

byAnton Shumikhin·Oct 28, 2024

Employ flexbox, the Swiss Army knife of CSS, to vertically center your content. By setting the parent div to display: flex; and align-items: center;, the child div is nestled right at the center, vertically. And yes, it's that simple!

Snippet:

<!-- Parent: The Overseer  -->
<div style="position: absolute; display: flex; align-items: center; height: 100%;">
  <!-- Child: The Obedient Apprentice -->
  <div>
    You'll find me in the center, boss!
  </div>
</div>

Centering with CSS transform

If you're targeting yesteryear's browsers such as IE9 that don't support flexbox, get out your CSS toolbox and pull out transform.

Snippet:

<!-- Matrix incoming! -->
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
  <div>
    Vertigo-free vertical and horizontal centering!
  </div>
</div>

In this scenario, using top: 50%; and left: 50%; positions the element halfway down and across the referring box respectively. The transform: translate(-50%, -50%) then counteracts any misplacement, fixing the content in the center.

Dealing with inline-block elements

Sometimes, the situation calls for working with the good old inline-block elements. Here, you'll find salvation in the vertical-align: middle; property.

Snippet:

<!-- Parent: The Gap Eliminator -->
<div style="position: absolute; height: 100%; text-align: center; font-size: 0;">
  <!-- Child: The Inline Warrior -->
  <div style="display: inline-block; vertical-align: middle; font-size: 16px;">
    Oh look, I'm an inline-block element and I'm in the center!
  </div>
</div>

Using font-size: 0; on the parent gets rid of whitespace gaps, while setting the font size back on the child restores text visibility. Please note: the vertical-align property is only applicable to inline-level elements, not blocks or boxes. It's not for everyone!

Other techniques for alignment

The Absolute Positioning trick

Give div an absolute position, and manage offsets on all directions.

Snippet:

<!-- I'm a Bouncer, between top, bottom, left and right. -->
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;">
  <div style="width: 50%; height: 50%; margin: auto;">
    Centre-stage, here I come!
  </div>
</div>

Transform with Perspective

Graphics can get blurry with transform, triggering OCD in many. perspective(1px) can improve rendering.

Snippet:

<!-- Poindexter, that pixel-perfect nerd -->
<div style="position: absolute; top: 50%; left: 50%; transform: perspective(1px) translate(-50%, -50%);">
  <div>
    Transformed and looking sharp!
  </div>
</div>

Gaps and Inline-block layouts

To remove the gap between inline-block elements caused by whitespace in the HTML, set the font-size of the parent to zero.

Snippet:

<!-- Gap-buster -->
<div style="font-size: 0;">
  <div style="display: inline-block; font-size: 16px;">
    I'm the first inline-block...
  </div>
  <!-- mysterious wizardry -->
  <div style="display: inline-block; font-size: 16px;">
    And adjacent inline-block with NO GAPS!
  </div>
</div>