求助：CSS旋转元素无法与容器对齐，如何实现文本居中？

修改思路 #

1. 将文本元素移入弹窗容器内部，确保两者天然堆叠，无需分开定位
2. 用Flex布局让文本在容器内先居中，再处理旋转偏移
3. 旋转时结合translate修正位置，抵消元素旋转后的坐标系偏移

完整修改代码 #

HTML

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

CSS

.popup {
  background-color: #f48277;
  width: 70px;
  height: 200px;
  position: fixed;
  right: 0;
  bottom: 30vh;
  border-radius: 70px;
  /* 开启Flex布局，让子元素默认居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-text {
  color: white;
  font-size: 26px;
  font-weight: bold;
  /* 先平移自身宽度的一半，再旋转，修正旋转后的位置 */
  transform: translateX(-50%) rotate(-90deg);
  /* 调整旋转原点为右侧中心，配合平移实现精准居中 */
  transform-origin: right center;
}

a {
  text-decoration: none;
}

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

关键说明 #

• display: flex + justify-content: center + align-items: center：让文本在未旋转时就处于容器中心位置
• transform: translateX(-50%) rotate(-90deg)：先将文本向左平移自身宽度的50%，再旋转90度，抵消旋转后元素的位置偏移
• transform-origin: right center：把旋转原点设置为文本的右侧中心，让旋转后的文本刚好贴合容器垂直居中

内容的提问来源于stack exchange，提问作者MediaMike182