Html 如何将旋转的元素放在右边的中间？ 我需要把一个旋转的元素放在右边的页面中间。在没有旋转的情况下，居中可以很好地工作，但是旋转会把一切都搞糟，因为我需要旋转的元素的宽度没有定义

#文本右键{
右：0；
-moz变换：旋转（90度）；/*Firefox 3.6 Firefox 4*/
-webkit变换：旋转（90度）；/*Safari*/
-o变换：旋转（90度）；/*Opera*/
-ms变换：旋转（90度）；/*IE9*/
变换：旋转（90度）；/*W3C*/
}
.附文{
位置：固定；
最高：50%；
-webkit转换：translateY（-50%）；
}

---

我首先将文本父div居中，使用文本对齐和垂直对齐将内部文本居中，然后旋转内部文本

#text-right {
    height: 100px;
    width: 400px;
    right: 0;
    -moz-transform: rotate(90deg); /* Firefox 3.6 Firefox 4 */
    -webkit-transform: rotate(90deg); /* Safari */
    -o-transform: rotate(90deg); /* Opera */
    -ms-transform: rotate(90deg); /* IE9 */
    transform: rotate(90deg); /* W3C */
  }

.side-text {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -200px;
    text-align: center;
    vertical-align: center;
}    
<div id="text-right" class="side-text">
  <a href="some link" class="navigation" draggable="false">
    <h1>Grafik im Raum</h1>
  </a>
</div>

#文本右键{
高度：100px；
宽度：400px；
右：0；
-moz变换：旋转（90度）；/*Firefox 3.6 Firefox 4*/
-webkit变换：旋转（90度）；/*Safari*/
-o变换：旋转（90度）；/*Opera*/
-ms变换：旋转（90度）；/*IE9*/
变换：旋转（90度）；/*W3C*/
}
.附文{
位置：绝对位置；
最高：50%；
左：50%；
利润上限：-50px；
左边距：-200px；
文本对齐：居中；
垂直对齐：居中；
}    

---

演示：

您必须设置一个合适的

变换原点

点（我使用了右上角），并根据该点相应地调整平移

请记住

translateX

即使元素旋转，它仍然与元素的宽度相关

*{
保证金：0；
填充：0；
框大小：边框框；
}
#文本权限{
右：0；
位置：固定；
最高：50%；
}
.附文{
背景：浅蓝色；
变换原点：右上角；
变换：旋转（90度）translateX（50%）；
}

---

两个css选择器都匹配同一个元素，这就是为什么只应用一个变换（应用旋转（90度），而不应用translateY（-50%）。但是你可以链接变换！因此，问题的解决方案如下所示：

#文本右键{
右：0；
}
.附文{
位置：固定；
最高：50%；
-moz变换：平移（-50%）旋转（90度）；
-ms变换：translateY（-50%）旋转（90度）；
-o变换：平移（-50%）旋转（90度）；
-webkit变换：translateY（-50%）旋转（90度）；
变换：平移（-50%）旋转（90度）；
}

这适用于正确定位的元素。现在我还需要一个用于左侧，但将变换原点更改为左上角不起作用。我做错了什么？好吧，我把-90度改成270度，现在可以了。非常感谢。