@Old1337
Posted
Hi there,
-
your way of centering the element isn't wrong however, you could do it with flex properties by first removing the position and transform properties from the container and then give the body these properties to center the element
display:flex justifiy-content:center align items: center min-height:100vh -
check the HTML report to fix accessiblity issues
i hope this is helpful and goodluck!
Marked as helpful
@amunshi-dev
Posted
@Old1337 Thank you.
@besttlookk
Posted
@amunshi-dev There are common way to center :
- Using only flex(which is easiler )
- Using position.
I see you used both.
#For flex:
.container{
// It sould have some height to see the desired result
display:flex;
align-item:center;
justify-content:center;
}
.container{
position:relative;
}
.container child{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%)
}
BTW you can also use grid to center.(tho its not that comman)
I hope i helped you. Feel free to write back if it is still not clear
Good Luck #happyCoding
Marked as helpful
@amunshi-dev
Posted
@besttlookk Yes, it's very helpful.
