Center Divs and Content with Grid
Centering in CSS used to be hard. With CSS Grid, it's just a few properties. Use our generator to see how 'place-items: center' works.
When to use this solution:
Use this when you need a single element or a group of elements perfectly centered within a container.
Common Use Cases
Centering a hero section call-to-actionCreating modal popup overlaysAligning icons inside buttonsEmpty state screen centering
1Step-by-Step Guide
Set display to grid
Apply 'display: grid' to the parent container.
Apply centering property
Use 'place-items: center' to handle both axes at once.
Verify dimensions
Ensure your container has a set height if you want vertical centering to be visible.
Grab the snippet
Copy the minimal CSS required for this perfect alignment.
Ready to get started?
Use our free tool to solve this problem in seconds. No installation required.
Generate Centering CSSFrequently Asked Questions
What is place-items?
It's a shorthand property that sets both 'align-items' and 'justify-items' at the same time.
Can I center just one axis?
Yes, you can use 'justify-content: center' for horizontal or 'align-content: center' for vertical.