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.
2 display: grid;
3 place-items: center;
4}
5/* No child styles needed. */
2 position: relative;
3}
4
5.child {
6 position: absolute;
7 top: 50%;
8 left: 50%;
9 transform: translate(-50%, -50%);
10}
Browser Support for
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2020.
Your first month is free
Managed WordPress hosting for faster sites.
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.