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 !!!!!



0
0
0.000
1 comments
avatar

Congratulations @coderamjad! You have completed the following achievement on the Hive blockchain and have been rewarded with new badge(s) :

You received more than 10 upvotes.
Your next target is to reach 50 upvotes.

You can view your badges on your board and compare yourself to others in the Ranking
If you no longer want to receive notifications, reply to this comment with the word STOP

Check out the last post from @hivebuzz:

Feedback from the October 1st Hive Power Up Day
0
0
0.000