@apah-dev
Posted
I've struggled with centering items myself for a while but now i know many options you could use. I'll share them here. You could try them all out on a test project and then apply them on real projects when you understand them.
container {
margin-left: auto;
margin-right: auto;
width: 400px;
}
If you want to use margin and make it work you have to specify width if not it doesn’t work *There’s no way to vertically align it to the centre. That’s the disadvantage of this option *
container {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
- the -50%, -50% represent x and y axis *
Using Flexbox method:
main {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; }
Using the grid method:
main {
display: grid;
align-items: center;
height: 100vh;
justify-content: center;
}
this is far from exhaustive as the methods you can use are many. I do advice you try them out and figure out the one that's best for the particular project you're working on. also consider how it would work for the responsiveness of your page. Hope this helps
Marked as helpful