Folder Structure
In the folder we can see that we have two files
- HTML File
- CSS File
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 codeFirst 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