@halelite
Posted
hi @thaArcadeGuy
Good job! Your solution looks great!
I just noticed a small thing about your CSS. In the design, the component is centered both horizontally and vertically. I suggest you center your component vertically as well, so your project looks way much better. There are a lot of ways to center it. Some of them are:
-
using flexbox
-
using margin or padding
-
using absolute position property
position: absolute
top: 50%;
transform: translateY(-50%);
Other that that great job! 👍
I hope it helps!
Marked as helpful
@thaArcadeGuy
Posted
@halelite Thank you very much. Let me get to it.
This is what I have used.
body {
position: relative;
height: 100vh;
}
.main-card {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}