2 Modern Ways to Center a div in CSS

Don’t search every time you want to center div!

As a developer I search the question “How to center div in CSS” whenever I need to center div horizontally and vertically. So I am not going to waste your time just look at the code below:

Method 1

First method uses Flex-box layout. You have to make parent div flexible by adding “display: flex” to it. To center child elements vertically and horizontally add “align-items: center” and “justify-content: center” respectively.

Method 2

Second approach is Grid. Grid is one of the most powerful layouting module. So, how we can center div horizontally and vertically? It is very easy. Just make parent container grid by adding “display: grid” and center elements “place-items: center”

That’s it, enjoy and enter my channel occasionaly for more web development tips like that!