- The Complete Guide to Centering in CSS
- XY Grid Solution
- Gotchas
- XY Flexbox Solution
- Gotchas
- XY Alternative Solution
- XY Centering for Block Elements
- Gotchas
- Vertical Centering (Y)
- Y Grid Solution
- Y Flexbox Solution
- Gotchas
- Y Centering for Block Elements
- Horizontal Centering (X)
- X Grid Solution
- X Flexbox Solution
- Gotchas
- X Centering for Block Elements
- X Centering for Dynamically Positioned Elements
- What to Read Next
The Complete Guide to Centering in CSS
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:
.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%; >
Join my newsletter for article updates, CSS tips, and front-end resources!
XY Flexbox Solution
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 :
CSS for «XY Flex Gotcha fixed»
.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.
XY Alternative Solution
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.
CSS for «XY Alternative Flexbox Solution»
.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.
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:
CSS for «XY Centering for Block Elements»
.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:
.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 :
CSS for «Y Grid Solution for columns»
.grid display: grid; align-content: center; grid-auto-flow: column; >
Y Flexbox Solution
Flexbox items can be vertically aligned with:
CSS for «Y Flexbox Solution»
.flex display: grid; align-items: center; >
Gotchas
If you switch the default axis by adding flex-direction: column this solution fails.
CSS for «Y Flexbox Gotcha for flex-direction: column»
.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:
CSS for «Y Flexbox Gotcha fix for flex-direction: column»
.flex display: grid; flex-direction: column; 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.
CSS for «Y Flexbox Gotcha fix for flex-direction: column»
.parent position: relative; > .child-wrapper position: absolute; top: 50%; transform: translateY(-50%); >
Horizontal Centering (X)
Solutions for centering horizontally, aka on the x-axis .
X Grid Solution
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:
CSS for «X Grid Solution for columns»
.grid display: grid; justify-content: center; grid-auto-flow: column; >
X Flexbox Solution
To center along the x-axis , which is the default flexbox axis for child item alignment, use:
CSS for «X Flexbox Solution»
.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 :
CSS for «X Flexbox Solution for flex-direction: column»
.flex display: flex; flex-direction: column align-items: center; >
X Centering for Block Elements
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.
CSS for «X Centering for Block Elements»
.block div margin-left: auto; margin-right: auto; width: 60%; >
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:
CSS for «X Centering for Dynamically Positioned Elements»
.parent position: relative; > .child-wrapper position: absolute; left: 50%; transform: translateX(-50%); >
What to Read Next
Developing For Imperfect: Future Proofing CSS Styles How do we plan future-proof styles in a world with an infinite degree of device and user ability variance? Let’s explore how things can break and how modern CSS provides solutions.
Custom CSS Styles for Form Inputs and Textareas Create custom form input and textarea styles that have a near-identical appearance across the top browsers, and ensure all states meet contrast requirements.
CSS Tips in Your Inbox Join my newsletter for article updates, CSS tips, and front-end resources! Newsletter Signup
Practical Uses of CSS Math Functions: calc, clamp, min, max Review the four best supported CSS math functions, and see how they can be used in both practical and unexpected ways, such as within gradients and color functions and in combination with CSS custom properties.