DEV Community

CoderZ90
CoderZ90

Posted on

3 1

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;
 }
Enter fullscreen mode Exit fullscreen mode

This is method just uses 3 lines of CSS codes and BOOM! 🌟 your item is now 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%);
 }
Enter fullscreen mode Exit fullscreen mode

πŸ‘† 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;
 }
Enter fullscreen mode Exit fullscreen mode

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

AWS GenAI LIVE image

Real challenges. Real solutions. Real talk.

From technical discussions to philosophical debates, AWS and AWS Partners examine the impact and evolution of gen AI.

Learn more

Top comments (2)

Collapse
 
official_fire profile image
CoderZ90 β€’

Hope you found this POST Helpful and learned something new 😊 Thankyou for giving your time and reading this πŸŒŸπŸ’–...

Collapse
 
official_fire profile image
CoderZ90 β€’

I also have my own Youtube channel named Coding Fire please subscribe -

youtube.com/c/Codingfire?sub_confi...

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay