If you're defining absolute width or height for an absolute positioned element, you can use auto margin to lay out these elements.

https://www.joshwcomeau.com/css/center-a-div/

.box {
  position: absolute;
  inset: 0.5rem;
  width: 7rem;
  height: 7rem;
  margin: auto;
}

I’m not sure how I arrived at this rule, but I’m really glad I did and I would likely never ever change it. The basic premise is that you should try and define all your margins in one direction. This means always use margin-bottom to push items down the page, and margin-left to push them across the page. I’m going to focus mainly on margin-bottom throughout this article as it’s the most obvious to explain, but this can be applied to both directions (top/bottom, right/left).