DEV Community

Cover image for 5 Ways To Center Content With CSS
Dhananjay Warade
Dhananjay Warade

Posted on

5 Ways To Center Content With CSS

📌 The Absolutely Absolute way

→ The old & easy way.

Image description


📌 The Griddy Way

→ Offers a grid-based layout system.

→ Making it easier to design web pages.

Image description


📌 The Flexy Way

→ Easy & Simple.

→ Flexible width/height of elements depending on available space.

Image description


📌 The Table Way

→ The very old way when tables were the only real way to structure HTML.

Image description


📌 Power of Margins

→ margin: auto on (flex or grid) item will not only horizontally center the element as it did in block layouts, but also center it in the vertical axis.

Image description


✨ Hopefully you find something new today!! ✨

→ It was just fun to see that CSS has so many varieties to do the same things just like we have in a programming language.

→ But then it depends on your personal preference & the 𝘀𝗶𝘁𝘂𝗮𝘁𝗶𝗼𝗻 when to use each of them.🤩✨

Top comments (0)