Resizing of div based on the width of the screen

Question

I have the following code. Why is the size of the div not adjusting when I reduce the width of the screen? What I'm trying to achieve is, that the size of the div has to reduce proportionally when the width of the screen is reduced so that the div doesn't look gigantic. I tried converting the width and height to vh and percentages but it's not working

.sign_logo {
  position: absolute;
  top: 6.2rem;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(200, 0, 50);
  justify-content: center;
  align-items: center;
  padding: 5%;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
}

<div class="sign_logo">
  <a>Register</a>
</div>

Answer 1

For what you intend to do, you are using the wrong kind of units: Use vw and vh instead of rem, those are relative to width and height of the viewport.

And add display: flex; to center the content in your div, otherwise justify-content: center; and align-items: center; won't have any effect.

.sign_logo {
  position: absolute;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
  background-color: rgb(200, 0, 50);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5vw;
  width: 25vw;
  height: 25vw;
  border-radius: 50%;
}

<div class="sign_logo">
  <a>Register</a>
</div>