Discussion on: Centring the item with two lines of code

[Chittoji Murali Sree Krishna]

Hmm but you can't make them vertically center, until unless you define the height for the element,

.container{
    display: grid;
    place-items: center;
    height: 100vh; /* 100vh is too much, 
    but it's an example */
   /* by default html elements won't 
   have height so we have to decide the 
   height so that we can vertically center */
}

It's common for both flex and grid templates, but for postion we won't need it, as by default it takes entire screen width and height, until unless we provide the parent tag with a
position: relative;

.container{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}