Html 动态垂直文本垂直对齐问题

我有一些文本可能在不同的页面上有所不同。我需要使它垂直居中对齐。由于文本宽度较小，出现了一些问题

。垂直文本块{
宽度：40px；
身高：100%；
位置：绝对位置；
排名：0；
左：0；
浮动：左；
背景颜色：灰色；
}
.垂直文本{
显示：块；
位置：相对位置；
最高：50%；
空白：nowrap；
字体大小：10px；
文本转换：大写；
转化：translateY（-50%）；
变换：旋转（-90度）；
}

阿什瓦尼·夏尔马

我添加了

右侧：50%

，

变换原点：右侧

并删除了

变换：translateY（）

。垂直文本块{
宽度：40px；
身高：100%；
位置：绝对位置；
排名：0；
左：0；
浮动：左；
背景颜色：灰色；
背景图像：线性梯度（暗灰色0%，暗灰色50%，浅灰色50%）；
背景重复：无重复；
}
.垂直文本{
显示：块；
位置：相对位置；
最高：50%；
右：50%；/*1*/
空白：nowrap；
字体大小：10px；
文本转换：大写；
/*变换：translateY（-50%）；*//*2*/
变换：旋转（-90度）；
变换原点：右；/*3*/
}

阿什瓦尼·夏尔马

我想你也可以这样做 只需正确添加translateX和translateY。垂直文本所有内容都将位于中心

.vertical-text {
font-size:8px;
text-transform: uppercase;
position: absolute;
top: 50%;
left: 50%;
white-space: nowrap;
-webkit-transform: translateX(-50%) translateY(-50%) rotate(90deg);
transform: translateX(-50%) translateY(-50%) rotate(90deg); white-space: nowrap;font-size: 10px;}

---

我对DOM做了一个小小的更改，并且能够实现它，即将文本居中，而不考虑其长度

对DOM做了一个小改动

<div class="vertical-text-wrap">
<div class="vertical-text-block">
</div>
<span class="vertical-text">American Leadership Index</span>
</div>

美国领导力指数

包括您的标记感谢@Nhan为您的答案。这有点帮助，但若文本稍大一点（例如：“美国领导力指数”），那个么它会移到顶部而不是中间。对于不同的字符长度，它不起作用