NFT card component

Hello!

Yes! Yes there is a better and a correct way to position icon to always be in 50%.

First, you get the icon at 50% with

.icon {
  left: 50%
}

...and since the coordinate of any element start at 0, 0 which is at top - left corner, you need to shift the icon itself by 50% of itself dimensions, with

.icon {
  left: 50%;
  transform: translateX(-50%);
}

Ofc, values for the Y axis need to be added, in the same way as for X axis.

Hope I made this understandable.

If not, check out this article on translate property

Good luck in fixing your code!