Center Align on a Absolutely Positioned Div

When dimensions aren't set

When the dimensions of the div are known, the technique above works perfectly. For variable dimensions, we have another move—the transform property:

.dynamic-center {
  position: absolute;
  top: 50%; /* Getting warmer */
  left: 50%; /* So close */
  transform: translate(-50%, -50%); /* Bullseye! */
}


Pro-tip: Make sure the parent has positioning (relative, absolute, or fixed) to set the containing block for the absolutely positioned element.

Dealing with troublesome cases

Juggling fluid content can be tricky. Without set sizes, the transform method is your comrade, adjusting to the changing dimensions automatically. But, when the width is fixed, there's a nifty alternative:

.fixed-width-center {
  position: absolute;
  width: 300px; /* Big enough to keep your text snug as a bug in a rug */
  left: 0; 
  right: 0;
  margin-left: auto; /* Everybody needs some space */
  margin-right: auto; 
  top: 50%; /* Halfway there... */
  transform: translateY(-50%); /* Lift off! */
}


And remember, the z-index property is your friend to make sure your elements don't have overlapping personal space.

Horizontal versus vertical

For the horizontally inclined:

Want to center a fixed-width div? Set left and right to 0 and let the margin do the rest:

.width-specified-center {
  position: absolute;
  width: 200px; /* Not too big, not too small. Just right. */
  left: 0;
  right: 0;
  margin: auto; /* Auto-magically aligned */
}


For fluid-width divs, where width cannot be determined beforehand, you guessed it, transform is the way to go:

.width-auto-center {
  position: absolute;
  left: 50%; /* Right down the middle */
  transform: translateX(-50%); /* And a little bit back... */
}


For those wanting to go vertical:

Vertically centering is as easy as using top and transform:

.vertical-center {
  position: absolute;
  top: 50%; /* Halfway to the top */
  transform: translateY(-50%); /* Pull it back a touch */
}


Accessible centering

Don't forget screen readers. Use semantic HTML to ensure your aligned content is also accessible to all users.

Embrace the quirks

One browser's center might be another browser's lopsided nightmare. Regularly cross-test your alignment across browsers, and employ tools like Autoprefixer to deal with vendor prefixes.

Treading on the shoulders of giants

Words of wisdom: It's okay to leverage proven patterns. Wonderful folks at CSS-Tricks, Smashing Magazine, and MDN Web Docs hold valuable wisdom on centering techniques, so don't shy away from learning from them!