5 Ways To Center Content With CSS

dhananjaywarade

Dhananjay Warade

Posted on March 14, 2022

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.๐Ÿคฉโœจ

๐Ÿ’– ๐Ÿ’ช ๐Ÿ™… ๐Ÿšฉ
dhananjaywarade
Dhananjay Warade

Posted on March 14, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

ยฉ TheLazy.dev

About