The Complete Guide to Centering in CSS

Get ready to learn how to approach the age old question faced by many a CSS practitioner:
"How do I center a div?"

Use Cases Covered#

1. Vertically and Horizontally (XY)
   • XY Grid Solution
   • XY Flexbox Solution
   • XY Alternative Flexbox Solution
   • XY Centering for Block Elements
2. Vertical Centering (Y)
   • Y Grid Solution
   • Y Flexbox Solution
   • Y Centering for Block Elements
3. Horizontal Centering (X)
   • X Grid Solution
   • X Flexbox Solution
   • X Centering for Block Elements
   • X Centering for Dynamically Positioned Elements

Vertically and Horizontally (XY)#

The holy grail: vertical and horizontal centering, aka centering along both the x-axis and the y-axis.

XY Grid Solution#

The most modern and easiest way is with the following two lines of CSS:

display: grid;
place-content: center;

Gotchas

Collapse of child grid using auto-fit or auto-fill

Given a child grid that uses the following styles:

grid-template-columns: repeat([auto-fit or auto-fill], minmax(10ch, 1fr));

The child grid will collapse in on itself, in this case down to the min part of minmax, due to the justify-content set in the place-content shorthand.

The fix is two-fold: switch the grid centering technique to use place-items instead of place-content, and then to specifically define that the child grid should be:

width: 100%;

Or whatever you'd prefer as a width value to create space for the grid columns.

XY Flexbox Solution#

Alternatively, you can use the very slightly more verbose Flexbox version:

display: flex;
align-items: center;
justify-content: center;

Gotchas

Flexbox has a slightly different behavior when a second item is added since flex items default to placement along the x-axis:

One way to resolve this is by adding:

flex-direction: column;

Alternatively, wrap the children in a single element, especially if you don't want them to be affected by the outer flexbox alignment.

If a child element uses grid with auto-fit or auto-fill it will encounter the same issue as when the parent container is grid as described previously.

XY Alternative Flexbox Solution#

margin: auto is unique for flexbox, and in the case you have only one child item, you can do the following:

.parent {
  display: flex;
}

.child {
  margin: auto;
}

The auto behavior for flex children, unlike childfren of block elements, can also be applied vertically which allows this solution to work.

XY Centering for Block Elements#

If you are unable to switch to grid or flexbox layout, here's a modern solution to this classic problem.

Ensure the child elements are wrapped in a containing element for the following to work:

.parent {
  position: relative;
}

.child-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

This combo works because when a percentage value is supplied to a translate definition, it based the percentage on the computed width (translateX) or height (translateY). In this example, we use shorthand to apply both x and y values to translate().

Absolute positioning takes an element out of normal document flow after which we can apply precise values (as needed) to control its positioning in the document, or in this case, relative to the parent with the required position: relative on the parent element.

After absolutely positioning the child from the top 50% and left 50%, which is 50% of the parent's height and width, respectively, we then use translate(-50%, -50%) to pull the child back up 50% of its own height and back left 50% of its own width. This results in a centered appearance that scales with the content.

Gotchas

Because we've used absolute posoitioning, there's a chance the content will grow to overflow the parent, even if like in the demo the parent has a min-width which typically grows with the content except for absolute children.

The fix for this is: use grid or flexbox :) Or prepare to create #allthemediaqueries.

Vertical Centering (Y)#

Solutions for centering vertically, aka on the y-axis.

Y Grid Solution#

We only need one property to vertically align in grid:

align-content: center;

Use of align-content is scalable for multiple child elements.

It also works if we switch the default grid axis to x with:

grid-auto-flow: column;

Y Flexbox Solution#

Flexbox items can be vertically aligned with:

align-items: center;

Gotchas

If you switch the default axis by adding flex-direction: column this solution fails.

A huge cuplprit of issues when dealing with flexbox is missing that flipping the default axis flips the associated properties.

For column, or y-axis flex layout, instead of align-items we now need to use:

justify-content: center;

Y Centering for Block Elements#

If possible, switch the layout model and use flex or grid.

Otherwise, much like the XY solution, we'll use absolute positioning and transform, but only apply to translateY to move the child 50% of its height.

.parent {
  position: relative;
}

.child-wrapper {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

See XY Centering for Block Elements to learn why this works.

Horizontal Centering (X)#

Solutions for centering horizontally, aka on the x-axis.

X Grid Solution#

The justify- properties are for x-axis alignment:

justify-content: center;

Again, this holds up if we switch the default axis with:

grid-auto-flow: column;

X Flexbox Solution#

To center along the x-axis, which is the default flexbox axis for child item alignment, use:

justify-content: center;

Gotchas

At this point, you know what's coming - this will fail for flex-direction: column.

We'll fix it by using the following instead of justify-content:

align-items: center;

X Centering for Block Elements#

This is the classic solution, although it must be placed on each element you wish to center individually.

margin-left: auto;
margin-right: auto;

For the demo, I've also set a max-width since by default block elements take up the full-width of their container, which visually opposes the centering.

X Centering for Dynamically Positioned Elements#

The use case here is for components like dropdown menus or tooltips when there is a requirement for centering of items of dynamic/unknown width relative to the associated trigger.

We'll use a method similar to Y Centering for Block Elements, but using left and translateX properties:

.parent {
  position: relative;
}

.child-wrapper {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}