@hamilton-i7
Posted
Hello, Paula👋
Congratulations on completing your first challenge👏 Your solutions responds really well on different screen sizes.
Like others have said, you have two basic options when it comes to vertically align your product card component:
- You can use
position: absolute
on the main tag and then center the card withtransform: translate()
like the example below:
main {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
And for the containing div you would do the following:
#container {
position: relative;
min-height: 100vh;
width: 100%;
}
min-height
is set to 100vh
to make the container div occupy the whole viewport height, allowing the product card to be centered.
- You can also set the containing div to
display: flex
along withalign-items: center
,justify-content: center
. More on that here 👉How to Center in CSS with Flexbox
Hope you find this helpuf! Happy coding😎
Marked as helpful