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?"

1. Vertically and Horizontally (XY)
   • XY Grid Solution
   • XY Flexbox Solution
   • XY Alternative 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

Usage, outcome, or hybrid. Any pricing model. Ready when your code is. Try Metronome today. ads via Carbon

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

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

.grid {
	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.

.grid-autofit {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10ch, 1fr));
}

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.

.grid {
	display: grid;
	place-items: center;
}

.grid-autofit {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10ch, 1fr));
	width: 80%;
}

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

.flex {
	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:

.flex {
	display: flex;
	align-items: center;
	justify-content: center;
}

One way to resolve this is by adding flex-direction: column:

.flex {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

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.

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

.flex {
	display: flex;
}

.grid {
	display: grid;
}

.only-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.

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.

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

We only need one property to vertically align in grid:

.grid {
	display: 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:

.grid {
	display: grid;
	align-content: center;
	grid-auto-flow: column;
}

Flexbox items can be vertically aligned with:

.flex {
	display: grid;
	align-items: center;
}

Gotchas

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

.flex {
	display: grid;
	flex-direction: column;
	align-items: center;
}

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:

.flex {
	display: grid;
	flex-direction: column;
	justify-content: center;
}

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.

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

The justify- properties are for x-axis alignment:

.grid {
	display: grid;
	justify-content: center;
}

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

.grid {
	display: grid;
	justify-content: center;
	grid-auto-flow: column;
}

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

.flex {
	display: flex;
	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 align-items instead of justify-content:

.flex {
	display: flex;
	flex-direction: column
	align-items: center;
}

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

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

.block div {
	margin-left: auto;
	margin-right: auto;
	width: 60%;
}

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%);
}