Center a Div in CSS with place-items: center
Centering elements without the transform hack
The old absolute + transform centering trick took 5 declarations across 2 selectors. Grid does it in 2 properties on the parent.
.parent { position: relative;}.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}.parent { display: grid; place-items: center;}Browser Support
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2020.
Safe to use without fallbacks.
Less code
2 properties on the parent vs. 5+ across two selectors. Fewer rules, fewer bugs.
Stays in flow
No position: absolute means the child stays in document flow. Layout stays predictable.
Works on anything
Text, images, divs, forms, anything gets centered. No need to know dimensions.
How it works
The old approach requires position: relative on the parent and position: absolute + top: 50%; left: 50%; transform: translate(-50%, -50%) on the child. That's 5 declarations across 2 selectors, and the child gets pulled out of normal flow.
The modern approach uses display: grid on the parent and place-items: center, a shorthand for align-items + justify-items. The child stays in flow, and you don't touch the child's styles at all.