使用Tailwind实现绝对定位元素旋转-90度后靠右居中

问题核心是旋转变换会交换元素的宽高维度，导致原本基于宽度的定位逻辑失效：你设置了right-0和-translate-y-1/2，但旋转后元素的“高度”其实是原文本的宽度，文本越长，这个“高度”越大，元素就会向左偏移越多。

解决方案：调整变换顺序与原点 #

通过先平移再旋转，配合正确的变换原点，让元素旋转后刚好贴合父容器右边缘：

修改按钮的Tailwind类为：

<button class="absolute right-0 top-1/2 transform-origin-top-right translate-x-full rotate-[-90deg] -translate-y-1/2">
  the more text that is here the further to the left it gets
</button>

关键类作用说明： #

• transform-origin-top-right：将旋转原点设置在元素的右上角，确保旋转时以这个点为基准，避免偏移。
• translate-x-full：先将元素向右平移自身的完整宽度（旋转前的宽度），这样旋转-90度后，元素的右侧（原顶部）会刚好对齐父容器的右边缘。
• rotate-[-90deg]：执行逆时针旋转90度的变换。
• -translate-y-1/2：保持元素在父容器中垂直居中。

完整代码示例 #

<div class="h-screen w-screen border border-red-600 relative overflow-hidden">
  <button class="absolute right-0 top-1/2 transform-origin-top-right translate-x-full rotate-[-90deg] -translate-y-1/2">
    the more text that is here the further to the left it gets
  </button>
  <div class="h-full w-full flex items-center justify-end border border-green-600">
    Center Marker
  </div>
</div>

这样调整后，无论按钮文本长度如何，都会始终紧贴父容器右边缘并保持垂直居中。

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