[CSS 3] Center an element both horizontally and vertically with place-items CSS property

An ancient problem of centering items with CSS is finally (!) solved!

In this quick lesson we're going to learn how to use place-items CSS property in order to center an element both horizontally and vertically with a single line of code!

 

Previously to place a child element to the center of parent element:

display: flex;
justfiy-content: center;
algin-items: center;

 

Now you just need to do:

display: gird;
place-items: center;