An Interest In:
Web News this Week
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
- March 14, 2024
- March 13, 2024
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 -
Original Link: https://dev.to/official_fire/top-3-ways-to-align-item-to-center-responsively-1neg
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To