DEV Community

HARSH VATS
HARSH VATS

Posted on

 

How to center align a div horizontally and vertically both.

Let's say you have a code

<div id='parent'>
   <div id='child'>hello</div>
</div>
Enter fullscreen mode Exit fullscreen mode

and you want to make the child element to be centered horizontally and vertically both. How will you do that??
Actually it's pretty simple.

#parent {
    display: grid;
    place-items: center;
}
Enter fullscreen mode Exit fullscreen mode

and it's done. Bbye..

Top comments (1)

Interested in expanding your horizon for programming languages, but not sure where to start?

Check out this great DEV post:

Hello world in 10 different languages