Dynamic vertical text vertical align issue - html

Question

I have some text which could be different on different pages. I need to make it align vertically middle. There is some problem because of less width for text.
.vertical-text-block {
width: 40px;
height: 100%;
position: absolute;
top: 0;
left: 0;
float: left;
background-color: grey;
}
.vertical-text {
display: block;
position: relative;
top: 50%;
white-space: nowrap;
font-size: 10px;
text-transform: uppercase;
transform: translateY(-50%);
transform: rotate(-90deg);
}
<div class="vertical-text-block">
<span class="vertical-text">ASHWANI SHARMA</span>
</div>
It should look like the image attached below:

Answer 1

I added right: 50%, transform-origin: right and removed transform: translateY()
.vertical-text-block {
width: 40px;
height: 100%;
position: absolute;
top: 0;
left: 0;
float: left;
background-color: grey;
background-image: linear-gradient(darkgrey 0%, darkgrey 50%, lightgrey 50%);
background-repeat: no-repeat;
}
.vertical-text {
display: block;
position: relative;
top: 50%;
right: 50%; /* 1 */
white-space: nowrap;
font-size: 10px;
text-transform: uppercase;
/*transform: translateY(-50%);*/ /* 2 */
transform: rotate(-90deg);
transform-origin: right; /* 3 */
}
<div class="vertical-text-block">
<span class="vertical-text">ASHWANI SHARMA</span>
</div>

Answer 2

i made a small change to the DOM and was able to achieve it,i.e centering the text , irrespective of its length .
Made a small change to the DOM .
<div class="vertical-text-wrap">
<div class="vertical-text-block">
</div>
<span class="vertical-text">American Leadership Index</span>
</div>
Added an extra wrapper , hope it is allowed.
.vertical-text-wrap {
position: absolute;
height: 100%;
margin: 0px 20px;
}
.vertical-text-block {
width: 40px;
height: 100%;
position: absolute;
top: 0;
left: 0;
float: left;
background-color: grey;
}
.vertical-text {
display: inline-block;
position: relative;
top: 50%;
left: -35%;
font-size: 10px;
text-transform: uppercase;
transform-origin: 50% 50%;
transform: translateY(50%) rotate(-90deg);
}
<div class="vertical-text-wrap">
<div class="vertical-text-block">
</div>
<span class="vertical-text">American Leadership Index</span>
</div>
Catch here is , when text becomes shorter , the left position of span.vertical-text has to be adjusted.
But hey , it is vertically centered :)

Answer 3

I think you can also do it this way http://codepen.io/Danstan/pen/QGWggO
Just add the translateX and translateY correctly on .vertical-text everything will be at the center
.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;}