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)