Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
July 15, 2021 03:40 am GMT

Top 3 Ways to align item to center ( responsively )

Hello Guys This is my first blog I am writing hope you found it useful and helpful. So in this blog we are going to learn how to center any item to the center responsively.

The most popular way to center is using flex in which you just need 3 lines of code to center it

Number One:-

 .center-item {    display: flex;    align-item: center;    justify-content: center; }

This is method just uses 3 lines of CSS codes and BOOM! your item is not centered Horizontally and vertically in the webpage ( responsively )

Now second way is using position absolute method in this method the parent element should have position: relative and then the item you are centering should have position: absolute to center it

Number Two:

 .parent-element {    position: relative; } .center-item-container {    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%); }

Here you see that the parent element have position relative to it and the center item ( the item we need to center ) has position absolute if you not put this then it will not work

Now if you want to see how to center the item to center by using just 2 lines of codes, then here it is

 .center-item-container {   display: grid;   place-items: center; }

Thankyou! For Giving your time and reading this blog hope you found it useful i also have my own Youtube channel named Coding Fire please subscribe -

https://youtube.com/c/Codingfire?sub_confirmation=1


Original Link: https://dev.to/official_fire/top-3-ways-to-align-item-to-center-responsively-1neg

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To