Css horizontal centering of a fixed div?

html

responsive-design

css

best-practices

byAnton Shumikhin·Dec 30, 2024

This quick solution involves position: fixed, left: 50%, and transform: translateX(-50%), which sets your div smack dab in the middle:

.fixed-center {
  position: fixed; /* Like a sticker */
  top: 30px; /* Jump! */
  left: 50%; /* Go halfway */
  transform: translateX(-50%); /* Then walk backwards half the inlined distance */
  z-index: 10; /* Above all, like the cream! */
}

Bind this CSS to your relevant div to achieve horizontal centering:

<div class="fixed-center">Center Me</div>

Versatility in centering

There's a bouquet of centering approaches we can pluck from:

Method 1: Full-width centering with margin auto

Making a fixed div act like a star in the middle of a stage:

.full-width-center {
  position: fixed; /* Standing firmly */
  left: 0; /* Take a step to the left */
  right: 0; /* Take a step to the right */
  margin: auto; /* Auto-magic centering! */
}

Here, margin: auto conjures up perfect horizontal centering - for those full-width moments of glory.

Method 2: Negative margin centering

This method has been around the block, much like the Rolling Stones:

.fixed-neg-margin {
  position: fixed; /* Keep rockin' */
  left: 50%; /* Halfway to nirvana */
  width: 500px; /* Rock-solid width */
  margin-left: -250px; /* Half a step backwards, the moonwalk of CSS */
}

Oldie but goodie method, doesn't disappoint - same as those rock legends.

Method 3: Responsive max-width centering

Preventing your div from taking up too much space - like a considerate subway rider:

.responsive-center {
  position: fixed; /* Ticket to ride */
  left: 50%; /* Mid-track */
  transform: translateX(-50%); /* Don't cross the yellow line */
  max-width: 100%; /* Mind the gap */
}

A recipe for a respectfully centered div that doesn't encroach on the viewport's personal space.

Art of inline content centering

Getting text elements in line — a drill sergeant's job:

.fixed-inline-center {
  position: fixed; /* Stand at attention */
  width: 100%; /* Fill the ranks */
  text-align: center; /* Centered fall in! */
}

.inline-child {
  display: inline-block; /* Standing in line */
}

With this, your text content will be as well-aligned as a row of privates at inspection!

Vertical alignment: Reach for the sky!

Going both ways — the biplane of CSS centering:

.fixed-center-both {
  position: fixed; /* Steady in turbulence */
  top: 50%; /* Sky high */
  left: 50%; /* Right off the center runway */
  transform: translate(-50%, -50%); /* Aerial maneuvers */
}

This centers the fixed div in the sweet spot at the viewport's horizontal and vertical intersection.

Flex Centering: Acrobatics class

Enter the modern age with flexbox centering:

.flex-container {
  position: fixed; /* No move, no groove */
  display: flex; /* Do the stretch */
  justify-content: center; /* Align horizont-zen */
  align-items: center; /* Align verti-zen */
  height: 100%; /* Full upward stretch */
  width: 100%; /* Full outward stretch */
}

.flex-center {
  flex: 0 1 auto; /* Bend and flex as the space allows */
}