Top 3 Ways to align item to center ( responsively )

#css #webdev

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 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%);
 }

👆 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