Qr code card using CSS position relative and fixed

I find problems when centering the card, I tried using margin auto but the top margin is not centering. To solve this problem I used position relative and fixed, to even the margins in all sides

.container {
  position: relative;
}
.even-margin {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Is this the best practice? Should I use flexbox or another method instead?