我建议将所有内容都放在同一个容器中，这样您的HTML看起来就像这样：

<div class="popup">
  <a target="_blank" href="https://google.com">
    <p class="popup-text"> Save 20% |</p>
  </a>
</div>

当两个不同的元素不共享同一个父元素时，对齐它们会很快变得混乱。
您可以使用writing-mode: vertical-rl来旋转文本。此外，您还可以使用transform: rotate(180deg)来翻转文本：

.popup-text {
   writing-mode: vertical-rl;
   transform: rotate(180deg);
}

然后，您可以在容器上使用display: flex，使文本水平和垂直居中：

.popup {
  display: flex;
  align-items: center;
  justify-content: center;
}

一个三个三个一个

我就说两句：如果是我，我会把横幅水平放置，像平常一样把所有东西都放进去，然后把整个横幅旋转90度：

.popup {
  background-color: #f48277;
  width: 200px;
  height: 70px;
  position: fixed;
  right: 70px;
  top: 0;
  border-radius: 70px;
  transform-origin: top right;
  transform: rotate(-90deg);
  
  display: flex;
  justify-content: center;
  align-items: center;
  
}

.popup-text {
  color: white;
  font-size: 26px;
  font-weight: bold;
}

a {
  text-decoration: none;
}

@media screen and (max-width: 600px) {
  .popup {
    width: 170px;
    height: 60px;
    right: 60px;
  }
  .popup-text {
    color: white;
    font-size: 16px;
    font-weight: bold;
  }
}

<div class="popup">
  <a target="_blank" href="https://google.com">
    <p class="popup-text"> Save 20%</p>
  </a>
</div>

这个问题是因为您需要将文本放在父div中并旋转父div，而不是文本本身。
这就是文本在div中不稳定的原因。

* {
  margin: 0;
  padding: 0;
}

.popup {
  text-align: center;
  padding-top: 20px;
  background-color: salmon;
  width: 180px;
  height: 50px;
  position: fixed;
  right: -50px;
  bottom: 32vh;
  border-radius: 50px;
  overflow: hidden;
  transform: rotate(-90deg);
}

.popup-text {
  color: white;
  font-size: 26px;
  font-weight: bold;
}

a {
  color: white;
  text-decoration: none;
}

@media screen and (max-width: 600px) {
  .popup {
    padding-top: 9px;
    width: 130px;
    height: 30px;
  }
  .popup-text {
    color: white;
    font-size: 16px;
    font-weight: bold;
  }
}

<div class="popup-text popup">
  <a target="_blank" href="https://google.com">Save 20% |</a>
</div>