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#
- Vertically and Horizontally (XY)
- Vertical Centering (Y)
- Horizontal Centering (X)
Vertically and Horizontally (XY)#
The holy grail: vertical and horizontal centering, aka centering along both the
x-axis and the
XY Grid Solution#
The most modern and easiest way is with the following two lines of CSS:
Collapse of child grid using
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
- Item 1
- Item 2
- Item 3
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:
Or whatever you'd prefer as a width value to create space for the grid columns.
- Item 1
- Item 2
- Item 3
XY Flexbox Solution#
Alternatively, you can use the very slightly more verbose Flexbox version:
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:
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-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:
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:
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
y values to
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.
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 Grid Solution#
We only need one property to vertically align in grid:
align-content is scalable for multiple child elements.
It also works if we switch the default grid axis to
Y Flexbox Solution#
Flexbox items can be vertically aligned with:
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.
y-axis flex layout, instead of
align-items we now need to use:
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.
See XY Centering for Block Elements to learn why this works.
Horizontal Centering (X)#
Solutions for centering horizontally, aka on the
X Grid Solution#
justify- properties are for
Again, this holds up if we switch the default axis with:
X Flexbox Solution#
To center along the
x-axis, which is the default flexbox axis for child item alignment, use:
At this point, you know what's coming - this will fail for
We'll fix it by using the following instead of
X Centering for Block Elements#
This is the classic solution, although it must be placed on each element you wish to center individually.
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