How can I horizontally center an element?

html

responsive-design

css

layout

byAnton Shumikhin·Sep 22, 2024

When you need to horizontally center a child element, apply display: flex; and justify-content: center; to the parent:

#outer {
  display: flex;       /* Flex those flexbox muscles 💪 */
  justify-content: center;   /* Points the direction to the center, like a compass */
}

If the child has a known width, you can center it using margin: 0 auto;:

#inner {
  margin: 0 auto;     /* Autopilot mode activated, steering to center */
  width: 50%;         /* Literally half baked 😅 */
}

These methods readily dispatch elements to the center stage with just a few CSS snippets.

Flexbox in action

Flexbox is a handy layout model that gives you excellent control over the alignment and distribution of items in a container. Not just for horizontal centering, it's equally proficient to manage vertical centering:

#outer {
  display: flex;
  justify-content: center; /* X marks the spot... horizontally */
  align-items: center;     /* ...And vertically too */
  height: 100%;            /* Only if the height is necessary */
}

Fallback for older browsers

Regrettably, not every antiquated browser supported flexbox. If your audience uses IE8 or IE9, you'll need a workaround using display: table and display: table-cell:

#outer {
  display: table;
  width: 100%; /* A table that fills the whole room */
}

#inner {
  display: table-cell;
  text-align: center; /* A cell that operates from the center, like a boss */
  vertical-align: middle; /* The boss is neither too high nor too low */
}

Dodge with absolute positioning and transforms

Combining position: absolute with CSS transforms provides an effective shifty solution for centering:

#outer {
  position: relative;
}

#inner {
  position: absolute;
  left: 50%;                      /* Halfway there... */
  transform: translateX(-50%);    /* ...Job completed! */
}

No-Width-Limits club

For centering fanatics who don't care about setting predefined widths, here's a preferred method:

#inner {
  margin: auto;
  position: absolute;
  left: 0; right: 0;    /* Maintains equality at both ends */
}

When specifics matter

For fixed-width elements, you can leverage the below styles:

#inner {
  width: 200px; /* Width is subject to mood swings */
  position: absolute;
  left: 50%; 
  margin-left: -100px; /* Apologies, forgot half at home */
}

For variable width elements, the transform property can offset the position:

#inner {
  position: absolute;
  left: 50%; 
  transform: translateX(-50%); /* An elegant slide to the center */
}

For complex layouts combining different methods may become necessary:

#outer {
  display: flex;
  flex-direction: column; /* Single file line, please */
  align-items: center; /* An equal opportunity employer, aligns everyone to center */
  text-align: center; /* TEXT stays CENTER, just like in summer camp */
}

#inner {
  display: inline-block; /* Join the queue please */
  margin: 0 auto; /* Sending you to center. Don't worry, AUTO mode engaged */
}