Inherit padding width without position absolute? Is it possible?

Not sure, but I am currently not able to figure out. I'm trying to center the inner div (blue transparent one) from the parent (with the red background) inside the background. As an example, they're technically in each other perfectly at the first example in the snippet.

At the second example however I've added padding: 5px; to both of them to the red and blue one. To the blue one because I wanted to inherit the width some how.

https://jsfiddle.net/L8enbcy3/

.box-1-1 {
  width: 50px;
  height: 50px;
  background: red;
  position: relative;
  display: block;
}

.box-1-2 {
  width: 50px;
  height: 50px;
  background: #0000ffb0;
  position: relative;
}


.box1 {
  width: 50px;
  height: 50px;
  background: red;
  padding: 5px;
  position: relative;
  display: block;
}

.box2 {
  width: 50px;
  height: 50px;
  background: #0000ffb0;
  padding: 5px;
}

<div class="box-1-1"><div class="box-1-2"></div></div><pre></pre><div class="box1"><div class="box2"></div></div>

What I'm trying is to get "box2" centered into "box1" like example 1 but with its padding, so that's covered by blue. without having to position: absolute it, if possible. What I'm thinking I have to do is to create and invisibile box absolute it, "center it with top: 0 and left: 0 when the parent has position: relative. Then as I mentioned with it being absolute it would go to the corners of the parents padding too and then in the absolute box, I would create a relative one with display: table and put in all the content.

My question now though is, is there another way to do that?