3 amazing tricks to center a div using CSS | @coderamjad

Folder Structure

In the folder we can see that we have two files

1. HTML File
2. CSS File

I link css file using html tag

Basic File Code

HTML File

In the markup file I have simply html boiler plate which you can see in the image below

HTML File

and in the css file i have basic code

First Trick (flex box)

In the CSS 3 we have amazing feature called flex box with this we can simply create web designs we can simple center a div using flexbox which you can see in the image below

you can see that we can simply center a div using 3 properties and it is a very handy trick.

Second Trick (using positions)

We can also simply center a div using positions but it is a complex trick

In this trick we can simply center a div using four peripteries

Third Trick (grid system)

we can also center a div using grid system of css and it is the most powerful feature of css we can simple center a div using only two properties which you can see in the image below

Thanks for reading !!!!!